🐛 Fix bug in firefox when a text box is inside a mask

CHANGES.md

@@ -37,6 +37,7 @@
 - Fix shift+wheel to horizontal scrolling in MacOS [#1217](https://github.com/penpot/penpot/issues/1217)
 - Fix path stroke is not working properly with high thickness [Taiga #2154](https://tree.taiga.io/project/penpot/issue/2154)
 - Fix bug with transformation operations [Taiga #2155](https://tree.taiga.io/project/penpot/issue/2155)
+- Fix bug in firefox when a text box is inside a mask [Taiga #2152](https://tree.taiga.io/project/penpot/issue/2152)
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/shapes/group.cljs

@@ -27,21 +27,31 @@
                              [(first childs) (rest childs)]
                              [nil childs])
 
+            ;; We need to separate mask and clip into two because a bug in Firefox
+            ;; breaks when the group has clip+mask+foreignObject
+            ;; Clip and mask separated will work in every platform
+            ;  Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1734805
+            [clip-wrapper clip-props]
+            (if masked-group?
+              ["g" (-> (obj/new)
+                       (obj/set! "clipPath" (clip-url render-id mask)))]
+              [mf/Fragment nil])
+
             [mask-wrapper mask-props]
             (if masked-group?
               ["g" (-> (obj/new)
-                       (obj/set! "clipPath" (clip-url render-id mask))
                        (obj/set! "mask"     (mask-url render-id mask)))]
               [mf/Fragment nil])]
 
-        [:> mask-wrapper mask-props
-         (when masked-group?
-           [:> render-mask #js {:frame frame :mask mask}])
+        [:> clip-wrapper clip-props
+         [:> mask-wrapper mask-props
+          (when masked-group?
+            [:> render-mask #js {:frame frame :mask mask}])
 
-         (for [item childs]
-           [:& shape-wrapper {:frame frame
-                              :shape item
-                              :key (:id item)}])]))))
+          (for [item childs]
+            [:& shape-wrapper {:frame frame
+                               :shape item
+                               :key (:id item)}])]]))))