fix: fix lazy-loaded images in safari (#3684)

Arukuen · bfintal · web-flow · commit 58e46d70e583 · 2026-05-03T16:37:39.000+08:00
* fix: fix lazyloaded images in safari * Apply suggestion from @bfintal * Apply suggestion from @bfintal --------- Co-authored-by: Benjamin Intal <bfintal@gmail.com>
diff --git a/src/block-components/image/style.scss b/src/block-components/image/style.scss
@@ -70,3 +70,11 @@
 		border-radius: 9999px !important;
 	}
 }
+
+// This is needed to fix the images rendering as lines when lazy-loaded in Safari. We target only the known issue here based on lazy loading from another plugin so as not to affect other uses of the image
+// Targets Safari 9+ on iOS and macOS, works as of late 2025.
+@supports (font: -apple-system-body) {
+	img.stk-img.lazyloaded {
+		will-change: transform;
+	}
+}

Original file line number	Diff line number	Diff line change
`@@ -70,3 +70,11 @@`
`70`	`70`	`border-radius: 9999px !important;`
`71`	`71`	`}`
`72`	`72`	`}`
	`73`	`+`
	`74`	`+// This is needed to fix the images rendering as lines when lazy-loaded in Safari. We target only the known issue here based on lazy loading from another plugin so as not to affect other uses of the image`
	`75`	`+// Targets Safari 9+ on iOS and macOS, works as of late 2025.`
	`76`	`+@supports (font: -apple-system-body) {`
	`77`	`+ img.stk-img.lazyloaded {`
	`78`	`+ will-change: transform;`
	`79`	`+ }`
	`80`	`+}`