[v4] skew utility classes add phantom border with child element's bg-color on Chrome browsers

[aedwardg]

What version of Tailwind CSS are you using?

v4.1.3

What build tool (or framework if it abstracts the build tool) are you using?

Phoenix LiveView, but this presents itself in Tailwind playground as well, so it's not Phoenix related.

What version of Node.js are you using?

v20.9.0, but this presents itself in Tailwind playground as well

What browser are you using?
This bug appears in Chrome (and likely chromium-based browsers). I don't see it in Firefox or Safari.

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/k6m7r3zHoZ

(if you don't see it, try moving the horizontal divider between the html and preview -- it randomly disappears at some resolutions)

Describe your issue

Current behavior:
Tailwind 4.x skew utility classes on parent elements add border artifact with inner elements' background color extending to the full size of the parent in Chrome browsers.

As can be seen in the Tailwind playground link above, the inner div has a w-1/2, but what looks like a 1-2px border appears in the child's background color along 1 or more edges of the parent element.

Most commonly, you can see the "border" along the bottom edge, but if you drag the horizontal divider between the html and preview, you will see that at some resolutions the border appears along the right edge or even disappears altogether.

Note: the example uses -skew-x-20, but it also appears with skew-x-20. Additionally, using inline styles: style="transform: skew(-20deg)" instead of -skew-x-20 appears to behave as expected.

Expected behavior:
None of the background color from the inner div should extend past the bounds of that element. This is current behavior for Tailwind 4.x on Firefox and Safari, and on all browsers for Tailwind 3.x

[philipp-spiess]

Hey! Thanks but this appears to be an issue regardless of wether or not Tailwind CSS is used, see: https://issues.chromium.org/issues/41464020

I converted this to a discussion since closing it feels wrong because it's still an issue but also we can't actionably close this so it doesn't feel like it should be in our issues list either. I did subscribe to the issue, hopefully it'll be resolved soon!

[aedwardg]

@philipp-spiess I understand that the chromium issue you linked looks similar, however I do not believe it is the same issue that I'm seeing. I am quite certain that this bug is specific to tailwind v4 because

1. Issue wasn't present in our app when we were on Tailwind v3.x

2. Issue presented itself when migrating over to Tailwind v4.x

3. Issue is reproducible in Tailwind playground for Tailwind 4.x

4. Issue is not reproducible for Tailwind 3.x, plain CSS, or inline styles (see links below)

5. Tailwind 4.x specifically changed the computed values for skew utility classes
   Tailwind 3.x output for skew-x-[-20deg]:

   .skew-x-\[-20deg\] {
     --tw-skew-x: -20deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   

   Tailwind 4.x output for -skew-x-20:

    .-skew-x-20 {
       --tw-skew-x: skewX(calc(20deg * -1));
      transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
    }
   

• Tailwind 4 example (issue present): https://play.tailwindcss.com/k6m7r3zHoZ
• Tailwind 3 example (no issue): https://play.tailwindcss.com/slr5F9wedn
• CSS stylesheet example (no issue): https://jsfiddle.net/t5s3df2r/
• Inline styles example (no issue): https://jsfiddle.net/rg9vu4Lf/

[philipp-spiess]

Hey! Thanks for the added context.

Yeah in Tailwind v4 we added the ability to rotate based on the x, y, and z axis independently so we changed the syntax from something like this:

.skew-old {
  transform: rotate(0) skewX(-20deg);
}

to effectively something like this:

.skew-new {
  transform: rotateX(0) rotateY(0) rotateZ(0) skewX(-20deg);
}

And while both of these should be identical to CSS (since we're defining all rotational variables as 0), it does appear that the latter causes the rendering glitch you're seeing: https://play.tailwindcss.com/HuiZtbrHOc

Let me look into this some more, maybe there is a way to work around this while still being able to tune each rotational value independently.

Note for myself: If I put in the computed transform matrix (matrix(1, 0, -0.36397, 1, 0, 0)) as the transition on it's own, the rendering glitch also doesn't happen.

[philipp-spiess]

Alright here's a PR that should fix your use case: #17627 :)