fix: prevent shifting in safari (#3690)

Arukuen · web-flow · commit 0facd9f56e3a · 2026-05-03T16:52:18.000+08:00
diff --git a/src/block/button/style.scss b/src/block/button/style.scss
@@ -28,3 +28,12 @@
 		box-sizing: border-box;
 	}
 }
+
+// Force Safari to render the SVG on its own layer to prevent shifting
+// during parent transition.
+// @see https://github.com/gambitph/Stackable/issues/3687
+@supports (font: -apple-system-body) {
+	.stk-button svg {
+		will-change: transform;
+	}
+}

Original file line number	Diff line number	Diff line change
`@@ -28,3 +28,12 @@`
`28`	`28`	`box-sizing: border-box;`
`29`	`29`	`}`
`30`	`30`	`}`
	`31`	`+`
	`32`	`+// Force Safari to render the SVG on its own layer to prevent shifting`
	`33`	`+// during parent transition.`
	`34`	`+// @see https://github.com/gambitph/Stackable/issues/3687`
	`35`	`+@supports (font: -apple-system-body) {`
	`36`	`+ .stk-button svg {`
	`37`	`+ will-change: transform;`
	`38`	`+ }`
	`39`	`+}`