[v4] Ability to bail out of using color-mix() in oklch due to Safari bug?

[danilo-leal]

Hey folks! I've recently upgraded the zed.dev site to use the latest v4-beta build, but upon checking it out on Safari, I realized some of our blue tones, which were using Tailwind's built-in palette, were now rendering as pink. This seems like a Safari Desktop bug, as it doesn't happen in Chrome, Firefox, and—what makes me believe it's a bug—Safari iOS.

This issue persistis even if the color tokens are not in oklch. I tried remapping the blue colors to hsl like so:

    --color-blue-100: hsl(210, 100%, 97%);
    --color-blue-200: hsl(211, 92%, 93%);
    ...

But no luck. However, if I go directly in the browser and change any instance of in oklch back to in srgb, within the color-mix functions, the color problem goes away. Not sure what the solution is here, really, but in the meantime, I wish I could bail out of using in oklch for color-mix transformations, at least while—if it's really a Safari thing—this problem's not solved.

in oklch (blues as pink?)	in srgb (correct blue)

[danilo-leal]

Update here: it seems like this is a bug with older versions of Safari—the most recent should have this working as expected! I'll close this discussion for now as I reckon a fix for this should be out quite soon.