[v4]: rotate-y-* utilities rotate in the x dimension in Safari
#15144
Labels
Comments
|
Wow this is a truly weird one — I've reduced the reproduction down to the Untitled.movIt works if we use |
|
Looks like this is the webkit bug logged 3 days ago: https://bugs.webkit.org/show_bug.cgi?id=283487 At least there's a workaround I guess 😅 |
adamwathan
added a commit
that referenced
this issue
Nov 26, 2024
…unction>" (#15179) Fixes #15144. Weird bug in Safari that breaks 3D transforms when using registered custom properties registered with the "<transform-function>" type: https://bugs.webkit.org/show_bug.cgi?id=283487 Declaring them as just "*" fixes it with no apparent downside since transitioning these 3D transforms still works, and usually transitions/animations are the reason you'd type these properties. Evidence of rotations looking the same in all browsers here:  --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
philipp-spiess
added a commit
that referenced
this issue
Apr 11, 2025
Closes #17621 Chrome as a pretty ugly rendering glitch when using a `skew-*` utility in Tailwind 4: https://play.tailwindcss.com/HuiZtbrHOc The 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: ```css .skew-v3 { transform: rotate(0) skewX(-20deg); } .skew-v4 { transform: rotateX(0) rotateY(0) rotateZ(0) skewX(-20deg); } ``` 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 `@property`s were defined as type `<transform-function>` and later changed to `*`](#15144). With a type of `*`, it makes sense that the initial value of these variables can default to `initial` without any compromises, allowing us to default to something like this now: ```css .skew-new { transform: skewX(-20deg); } ``` 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/g3FXPEJHpn ## Test plan - Tested on latest Chrome, Firefox, and Safari as well as Safari 15.5 and 16.4. <img width="564" alt="Screenshot 2025-04-09 at 18 01 51" src="https://github.com/user-attachments/assets/2e0b1c96-7c4d-41a8-b3d0-0f6134a3e635" />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of Tailwind CSS are you using?
v4.0.0-beta.2
What build tool (or framework if it abstracts the build tool) are you using?
Nextjs 15.0.3
What version of Node.js are you using?
20.17.0
What browser are you using?
Chrome, iOS Safari, macOS Safari
What operating system are you using?
Windows 11, iOS 18.1, macOS 15.0.1
Reproduction URL
https://play.tailwindcss.com/sHoCSE6sM2
Describe your issue
in Safari,
rotate-y-180flips vertically instead of horizontally. I've addedhover:for desktop usage andactive:(press) for mobile. Manually overriding the utility like so fixes it:rotate-y-45does appear to "shrink" vertically too, so perhaps it's allrotate-y-*utilities.rotate-x-*appears to be fine.The text was updated successfully, but these errors were encountered: