[v4] skew utility classes add phantom border with child element's bg-color on Chrome browsers #17602
Description
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