diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs
index 784386a0b..c95f72e1a 100644
--- a/frontend/src/app/config.cljs
+++ b/frontend/src/app/config.cljs
@@ -22,7 +22,7 @@
 ;; --- Auxiliar Functions
 
 (def valid-browsers
-  #{:chrome :firefox :safari :edge :other})
+  #{:chrome :firefox :safari :safari-16 :safari-17 :edge :other})
 
 (def valid-platforms
   #{:windows :linux :macos :other})
@@ -33,13 +33,17 @@
         check-chrome? (fn [] (str/includes? user-agent "chrom"))
         check-firefox? (fn [] (str/includes? user-agent "firefox"))
         check-edge? (fn [] (str/includes? user-agent "edg"))
-        check-safari? (fn [] (str/includes? user-agent "safari"))]
+        check-safari? (fn [] (str/includes? user-agent "safari"))
+        check-safari-16? (fn [] (and (check-safari?) (str/includes? user-agent "version/16")))
+        check-safari-17? (fn [] (and (check-safari?) (str/includes? user-agent "version/17")))]
     (cond
-      (check-edge?)    :edge
-      (check-chrome?)  :chrome
-      (check-firefox?) :firefox
-      (check-safari?)  :safari
-      :else            :other)))
+      (check-edge?)      :edge
+      (check-chrome?)    :chrome
+      (check-firefox?)   :firefox
+      (check-safari-16?) :safari-16
+      (check-safari-17?) :safari-17
+      (check-safari?)    :safari
+      :else              :other)))
 
 (defn- parse-platform
   []
@@ -130,7 +134,9 @@
 
 (defn ^boolean check-browser? [candidate]
   (dm/assert! (contains? valid-browsers candidate))
-  (= candidate browser))
+  (if (= candidate :safari)
+    (contains? #{:safari :safari-16 :safari-17} browser)
+    (= candidate browser)))
 
 (defn ^boolean check-platform? [candidate]
   (dm/assert! (contains? valid-platforms candidate))
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 c229993fd..60e1e0ad9 100644
--- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
@@ -281,7 +281,7 @@
         ;; NOTE: this teoretically breaks hooks rules, but in practice
         ;; it is imposible to really break it
         maybe-zoom
-        (when (cf/check-browser? :safari)
+        (when (cf/check-browser? :safari-16)
           (mf/deref refs/selected-zoom))
 
         shape (cond-> shape
@@ -300,26 +300,27 @@
         width  (mth/max (dm/get-prop bounds :width)
                         (dm/get-prop shape :width))
         height (mth/max (dm/get-prop bounds :height)
-                        (dm/get-prop shape :height))]
+                        (dm/get-prop shape :height))
+
+        style
+        (cond-> #js {:pointer-events "all"}
+          (cf/check-browser? :safari-16)
+          (obj/merge!
+           #js {:position "fixed"
+                :left 0
+                :top  (- (dm/get-prop shape :y) y)
+                :transform-origin "top left"
+                :transform (when (some? maybe-zoom)
+                             (dm/fmt "scale(%)" maybe-zoom))}))]
 
     [:g.text-editor {:clip-path (dm/fmt "url(#%)" clip-id)
                      :transform (dm/str (gsh/transform-matrix shape))}
      [:defs
       [:clipPath {:id clip-id}
-       [:rect {:x x
-               :y y
-               :width width
-               :height height
-               :fill "red"}]]]
+       [:rect {:x x :y y :width width :height height}]]]
 
      [:foreignObject {:x x :y y :width width :height height}
-      [:div {:style {:position "fixed"
-                     :left 0
-                     :top  (- (dm/get-prop shape :y) y)
-                     :pointer-events "all"
-                     :transform-origin "top left"
-                     :transform (when (some? maybe-zoom)
-                                  (dm/fmt "scale(%)" maybe-zoom))}}
+      [:div {:style style}
        [:& text-shape-edit-html
         {:shape shape
          :key (dm/str shape-id)}]]]]))