diff --git a/CHANGES.md b/CHANGES.md index 0a863b0e75..caf44f2ffa 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index a866d451ab..8d274e84db 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/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))}]]]]))