Workaround Chrome rendering bug for skew-* utilities#17627
Merged
philipp-spiess merged 2 commits intomainfrom Apr 11, 2025
Merged
Workaround Chrome rendering bug for skew-* utilities#17627philipp-spiess merged 2 commits intomainfrom
skew-* utilities#17627philipp-spiess merged 2 commits intomainfrom
Conversation
c9dec7d to
57c045b
Compare
thecrypticace
approved these changes
Apr 11, 2025
vaernion
pushed a commit
to Arbeidstilsynet/brevgen2
that referenced
this pull request
Dec 3, 2025
…patch) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.3` -> `4.1.4`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.3/4.1.4) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [tailwindcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss)) | [`4.1.3` -> `4.1.4`](https://renovatebot.com/diffs/npm/tailwindcss/4.1.3/4.1.4) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@​tailwindcss/postcss)</summary> ### [`v4.1.4`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#414---2025-04-14) [Compare Source](tailwindlabs/tailwindcss@v4.1.3...v4.1.4) ##### Added - Add experimental `@tailwindcss/oxide-wasm32-wasi` target for running Tailwind in browser environments like StackBlitz ([#​17558](tailwindlabs/tailwindcss#17558)) ##### Fixed - Ensure `color-mix(…)` polyfills do not cause used CSS variables to be removed ([#​17555](tailwindlabs/tailwindcss#17555)) - Ensure `color-mix(…)` polyfills create fallbacks for theme variables that reference other theme variables ([#​17562](tailwindlabs/tailwindcss#17562)) - Fix brace expansion in declining ranges like `{10..0..5}` and `{0..10..-5}` ([#​17591](tailwindlabs/tailwindcss#17591)) - Work around a Chrome rendering bug when using the `skew-*` utilities ([#​17627](tailwindlabs/tailwindcss#17627)) - Ensure container quer...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #17621
Chrome as a pretty ugly rendering glitch when using a
skew-*utility in Tailwind 4: https://play.tailwindcss.com/HuiZtbrHOcThe was not an issue in v3 since transforms were set up in a different way. Without the
var(…)syntax, the difference boils down to this:It appears that using any of the single-dimension rotate functions will cause the Chrome rendering to glitch.
After doing some digging, we found that initially these
@propertys were defined as type<transform-function>and later changed to*. With a type of*, it makes sense that the initial value of these variables can default toinitialwithout any compromises, allowing us to default to something like this now:Tested this change in the latest version of Chrome (135) and it does make the rendering glitch in the initial issue disappear. By using the
var(--tw-rotate-x,)syntax we also ensure this works on older versions of Safari (tested on Safari 15.5 and 16.4).Note, however, that there are still glitches happening when you combine rotate and skew in the latest version of Chrome or when you transition the
skew(…)variable. This also happens in plain CSS with no variables though, so there isn't something we can do about this: https://play.tailwindcss.com/g3FXPEJHpnTest plan