Bug 73988 – CSS masking on rotated child elements creates black glitchy squares

• Component: CSS
• Status: RESOLVED WORKSFORME

Created attachment 118180 [details]
Basic HTML and CSS to reproduce this bug

-webkit-mask-box-image (or -webkit-mask-image) combined with -webkit-transform's rotate(), rotateX(), and rotateY() produces black glitchy squares and lines on child inline-block elements that are near other rotated elements.

To reproduce:
1. Open attached HTML file in Safari on Windows 7.
2. Drag the window's handle around to resize the Safari window, causing the graphical glitch to constantly change.

Screenshot of what I see: http://i.imgur.com/0dV3j.png
Both elements should be purely pink with a soft edge. There should not be any black.

Happens to me on Windows 7 (64-bit), in both Safari 5.1.2 (7534.52.7) and WebKit Nightly r102128.
Does not happen on Windows Vista nor Mac OS 10.6. Does not happen in Chrome 15.
nVidia GTX 460, tested with up-to-date drivers and year-old drivers. No problems with the card that I know of.

Some notes:
- Only happens when using a mask, tested with PNG and SVG files.
- Have to resize the window to create this, unless the divs are being animated.
- Only 1 element gets the black lines, no matter how many divs you add (for the attached example, anyway).
- Bug does not occur when there's only 1 child div without any siblings.
- Using the same image as a background-image without any mask seems fine.
- Zooming in (Ctrl +) can lessen or entirely remove all the black squares. (resize the window after zooming to see)
- In the attached HTML file, changing rotateX(60deg) to rotateX(90deg) makes this bug go away. Certain other angles are safe, too (if it makes the element look very thin).
- Setting the div height and width to greater than 120px resolves this. Anything lower produces the bug.

Larger example of this in action (different from attachment): http://is.gd/W9tRs7 (animated rotating elements + masking = black lines)
Screenshot: http://i.imgur.com/N0V8i.jpg
If I zoom in all the way, or remove the image masking, the bug does not happen.

[Shane Stephens]

Additional testing: this bug will not repro on Mac OSX 10.7.4, in Chrome Canary (22.0.1188.0), Chrome Stable (20.0.1132.43), or Safari (Version 5.1.7 (7534.57.2)).

Seems like this has been fixed?

Windows 7, Safari 5.1.7, no more black glitches.

[Dirk Schulze]

Works for me as well. Closing bug.