Summary
The NavbarSaas sticky header renders on Chrome but is reported invisible on Safari.
Root causes (Safari/WebKit-specific)
backdrop-filter without -webkit- prefix — Safari only supports unprefixed backdrop-filter from v18; before that the blur silently no-ops.oklch(var(--token) / a) color system with bare-channel tokens — Safari < 15.4 lacks oklch(), so the header background + text drop to initial values (illegible).
Fix
- Inline
-webkit-backdrop-filter on the header element.
- Gated
@supports not (color: oklch(0 0 0)) sRGB fallback for the navbar + body (no effect on oklch-capable browsers).
Verification
Chrome unaffected (changes additive + gated). Real-Safari confirmation pending deploy — WebKit cannot run on the dev box (ICU/libxml2 version mismatch).
Summary
The
NavbarSaassticky header renders on Chrome but is reported invisible on Safari.Root causes (Safari/WebKit-specific)
backdrop-filterwithout-webkit-prefix — Safari only supports unprefixedbackdrop-filterfrom v18; before that the blur silently no-ops.oklch(var(--token) / a)color system with bare-channel tokens — Safari < 15.4 lacksoklch(), so the header background + text drop to initial values (illegible).Fix
-webkit-backdrop-filteron the header element.@supports not (color: oklch(0 0 0))sRGB fallback for the navbar + body (no effect on oklch-capable browsers).Verification
Chrome unaffected (changes additive + gated). Real-Safari confirmation pending deploy — WebKit cannot run on the dev box (ICU/libxml2 version mismatch).