mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d6d913ec39
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 the [`color-mix(…)` function is not compatible with `currentColor` for these versions of Safari](https://stackoverflow.com/questions/76436497/the-color-mix-property-involving-currentcolor-causes-safari-to-crash). We tried a few different ways to work around this without success: - Using an `@supports` media query to target these Safari versions and overwriting the placeholder still makes these browsers crash. - Changing the way we apply opacity to `currentColor` in core doesn't seem to work for non-placeholder values: https://github.com/tailwindlabs/tailwindcss/issues/17194#issuecomment-2728949181 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 `::placeholder` styles in preflight though according to our testing so this PR applies this change to preflight. ## Test plan - See https://play.tailwindcss.com/WSsSTLHu8h?file=css - Tested on Chrome/Safari 16.4/Safari 18.3/Firefox <img width="564" alt="Screenshot 2025-03-17 at 11 32 47" src="https://github.com/user-attachments/assets/cfd0db71-f39a-4bc0-bade-cea70afe50ae" />