Safari 16.4 crash on <input placeholder> or text-current + opacity

[aaronadamsCA]

What version of Tailwind CSS are you using?

v4.0.14

What browser are you using?

iOS Safari 16.4

Reproduction URL

https://play.tailwindcss.com/K2JSaOKDJX

<p class="text-current/50">text</p>

https://play.tailwindcss.com/V9jkBlLwU8

<input placeholder="text" />

Describe your issue

Both of the examples above crash the webpage in Safari 16.4:

I don't know the full range of affected versions.

The trigger seems to be passing currentColor to color-mix(), I found more information about it here:

https://stackoverflow.com/questions/76436497/the-color-mix-property-involving-currentcolor-causes-safari-to-crash

My second example above crashes because that exact combo is in preflight.css:

tailwindcss/packages/tailwindcss/preflight.css

Lines 291 to 294 in 50562a9

	::placeholder {
	opacity: 1; /* 1 */
	color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
	}

Maybe something like color(from currentColor srgb r g b / 50%) would work instead.

[aaronadamsCA]

Edit: It looks like the affected versions may be 16.4 and 16.5.

https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes#New-Features

https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes#Resolved-Issues

Unfortunately I don't know how to simulate iOS 16.6, Xcode only offers up to 16.4.

Given a webpage crash is much more serious than an unsupported style, hopefully it's something you can work around in v4.

[aaronadamsCA]

return value === "currentColor" ?
    `oklab(from ${value} l a b / ${alpha})`
    // or `color(from ${value} srgb r g b / ${alpha})`
  : `color-mix(in oklab, ${value} ${alpha}, transparent)`;

This approach seems to work around the crash locally with reasonable tradeoffs.

[philipp-spiess]

Thanks for the detailed repro and work you put in. That's really something, huh. My first instinct was to use @supports to overwrite the preflight value for Safari 16.4 and 16.5 but it turns out that Safari crashes even if the color value is overwritten.

I've been testing the oklab(…) function now as you suggested but the funny thing is that it only works for the preflight placeholder in my local tests:

You can see this in this repro here too: https://play.tailwindcss.com/WSsSTLHu8h?file=css

It does seem safe to change preflight to color: oklab(from currentColor l a b / 50%); /* 2 */ at least so that Safari is no longer blocked but it does, unfortunatly, mean that you can't use text-current/50 without causing issues for older Safari versions :(

[aaronadamsCA]

Yeah, this particular report from a few of our users ended up ruining my day and then some. You haven't truly lived until you've manually bisected your entire front end codebase all the way down to a single style. 😅

Still a nice moment of magic when Tailwind IntelliSense seamlessly reflected our pnpm patch:

It's not a perfect workaround, but we'll see infinitely more sales from a broken style than a crashed browser! I still can't believe they shipped this.

[philipp-spiess]

Unfortunately we have to revert this fix. This does not work in older versions of Chrome and the usage of the relative color features also means it'll require a much newer version of Safari/Firefox/Chrome to work correctly. We're still thinking what the best way to fix this is.

@aaronadamsCA Do you remember the exact CSS you had that crashed your site? We're wondering if you used text-current/50 specifically or if you were just relying on the preflight placeholder styles?

[aaronadamsCA]

@philipp-spiess In our app I had specifically narrowed this down to text-current/50, although I expect styles like divide-current/10 and decoration-current/50 would cause the same crash.

The only other idea I had was to wrap the style in a @supports hack referencing some unrelated feature (like contain-intrinsic-size) that wasn't supported until Safari 17.