Fix button icon jitter in safari and tauri

unisonweb · Sep 26, 2024 · 1872183 · 1872183
1 parent 2dca376
commit 1872183
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/css/ui/components/button.css b/src/css/ui/components/button.css
@@ -118,6 +118,11 @@ a.button:hover {
   transform: translate(0, 0.1rem);
 }
 
+/* Fixes icon jitter on click in safari (and thus tauri) */
+.button .icon {
+  will-change: transform;
+}
+
 /* -- Sizes ---------------------------------------------------------------- */
 
 .button.small {

diff --git a/storybook/stories/Stories/UI/Button.elm b/storybook/stories/Stories/UI/Button.elm
@@ -27,7 +27,7 @@ elements =
     , B.icon UserClicked I.unisonMark
     , B.iconThenLabel UserClicked I.unisonMark "Icon then Label"
     , B.labelThenIcon UserClicked "Label then Icon" I.unisonMark
-    , B.iconThenLabelThenIcon UserClicked I.unisonMark "Icon then Label then Icon" I.unisonMark
+    , B.iconThenLabelThenIcon UserClicked I.unisonMark "Icon then Label then Icon" I.caretDown
     ]