strong-webkit-fix (#832)

cycle4passion · web-flow · commit 4f5f1c92f46b · 2026-04-17T07:57:02.000-04:00
Currently <strong> text elements rendering dark Safari in darkmode. Webkit treats color: initial on inline replaced/formatted elements differently than Chrome/Firefox. The most reliable fix is avoiding inherit entirely and just setting an explicit color directly Example [Transform](https://next.layerchart.com/docs/guides/transform#pointer-interactions) Fix has been tested for dark and light modes in Safari, Chrome, Firefox.
diff --git a/docs/src/app.css b/docs/src/app.css
@@ -36,6 +36,10 @@
 		border-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
 		outline-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
 	}
+	strong {
+		color: currentColor !important; /* webkit fix for 'text-initial'  */
+		font-weight: 800 !important;
+	}
 }
 
 @layer utilities {

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,10 @@`
`36`	`36`	`border-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);`
`37`	`37`	`outline-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);`
`38`	`38`	`}`
	`39`	`+ strong {`
	`40`	`+ color: currentColor !important; /* webkit fix for 'text-initial' */`
	`41`	`+ font-weight: 800 !important;`
	`42`	`+ }`
`39`	`43`	`}`
`40`	`44`
`41`	`45`	`@layer utilities {`