🐛 Fix problem with text editor in Safari

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix problem on selection numeric inputs on Firefox [#2991](https://github.com/penpot/penpot/issues/2991)
 - Changed the text dominant-baseline to use ideographic [Taiga #4791](https://tree.taiga.io/project/penpot/issue/4791)
 - Viewer wrong translations [Github #3035](https://github.com/penpot/penpot/issues/3035)
+- Fix problem with text editor in Safari
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -12,6 +12,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.text :as gsht]
    [app.common.text :as txt]
+   [app.config :as cf]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
@@ -271,6 +272,12 @@
         text-modifier
         (mf/deref text-modifier-ref)
 
+        ;; For Safari It's necesary to scale the editor with the zoom level to fix
+        ;; a problem with foreignObjects not scaling correctly with the viewbox
+        maybe-zoom
+        (when (cf/check-browser? :safari)
+          (mf/deref refs/selected-zoom))
+
         shape (cond-> shape
                 (some? text-modifier)
                 (dwt/apply-text-modifier text-modifier)
@@ -299,5 +306,7 @@
       [:div {:style {:position "fixed"
                      :left 0
                      :top  (- (:y shape) y)
-                     :pointer-events "all"}}
+                     :pointer-events "all"
+                     :transform-origin "top left"
+                     :transform (when maybe-zoom (dm/fmt "scale(%)" maybe-zoom))}}
        [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]]]))