Don't use color-mix(…) on currentColor
#17247
Conversation
philipp-spiess
force-pushed
the
fix/safari-16-crash
branch
from
bde5e4b to
f0fc699
Compare
|
@RobinMalfait Yeah I'm not sure. I guess it's better than hard crashing but the fix does not appear to work as expected in those cases (see PR description). It also won't work with CSS or theme variables set to |
philipp-spiess
force-pushed
the
fix/safari-16-crash
branch
from
f0fc699 to
8eca822
Compare
philipp-spiess
force-pushed
the
fix/safari-16-crash
branch
from
8eca822 to
2227ee0
Compare
|
Updated the PR |
|
Good morning! Oops completely read past that part and just looked at the code 🙈. That's really strange that it doesn't work in other spots. Really annoying that it also still crashes when using a
If that's true, then I think we should update it to My initial testing says that that still works: https://play.tailwindcss.com/adWyxqL0Ns?file=css 🤞 |
|
@RobinMalfait Yep, if you take a look at my test plan, I tested on Chrome/Safari 16.4/Safari 18.3/Firefox and also found it working everywhere (even on latest Safari) as expected. Just old Safari does not apply the opacity which IMO is, like you said, better than a hard-crash. |
This reverts commit d6d913e.
This reverts commit d6d913e.
This reverts commit d6d913e.
… around Preflight crash This reverts commit d6d913e.
… around Preflight crash This reverts commit d6d913e.
… around Preflight crash (#17306) Closes #17194. This reverts commit d6d913e. The initial fix does breaks older versions of Chrome (where text won't render with a color for the placeholder at all anymore) and the usage of the _relative colors_ features also means it'll require a much newer version of Safari/Firefox/Chrome to work correctly. The implementation was also wrong as it always set alpha to the specific percent instead of applying it additively (note that this can be fixed with `calc(alpha * opacity)` though). Instead we decided to fix this by adding a `@supports` query to Preflight that only targets browsers that aren't affected by the crash. We currently use the following workaround: ```css /* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentColor`. (#17194) */ @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentColor 50%, transparent); } } ``` ## Test plan When testing the `color-mix(currentColor)` vs `oklab(from currentColor …)` we created the following support matrix. I'm extending it with _our fix_ which is the fix ended up using: | Browser | Version | `color-mix(… currentColor …)` | `oklab(from currentColor …)` | `@supports { color-mix(…) }` | | ------- | ------- | ----------------------------- | ---------------------------- | ------- | | Chrome | 111 | ❌ | ❌ | ❌ | | Chrome | 116 | ✅ | ❌ | ✅ | | Chrome | 131+ | ✅ | ✅ | ✅ | | Safari | 16.4 | 💥 | ❌ | ❌ | | Safari | 16.6+ | ✅ | ❌ | ❌ | | Safari | 18+ | ✅ | ✅ | ✅ | | Firefox | 128 | ✅ | ❌ | ✅ | | Firefox | 133 | ✅ | ✅ | ✅ | Note that on Safari 16, this change makes it so that the browser does not crash yet it still won't work either. That's because now the browser will fall back to the default placeholder color instead. We used the following play to test the fix: https://play.tailwindcss.com/RF1RYbZLKY
Closes #17194
This PR works around a crash when rendering opacity on
currentColor(as used by the placeholder styles in preflight) on Safari 16.4 and Safari 16.5. Unfortunately it seems that thecolor-mix(…)function is not compatible withcurrentColorfor these versions of Safari. We tried a few different ways to work around this without success:@supportsmedia query to target these Safari versions and overwriting the placeholder still makes these browsers crash.currentColorin core doesn't seem to work for non-placeholder values: Safari 16.4 crash on<input placeholder>ortext-current+ opacity #17194 (comment) However, a wrong opacity is still better than a complete browser crash.The work-around of using the
oklab(…)function does seem to work for::placeholderstyles in preflight though according to our testing so this PR applies this change to preflight.Test plan