Bug 73988 - CSS masking on rotated child elements creates black glitchy squares
Summary: CSS masking on rotated child elements creates black glitchy squares
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-12-07 00:23 PST by chrisnzl
Modified: 2012-11-21 22:18 PST (History)
2 users (show)

See Also:


Attachments
Basic HTML and CSS to reproduce this bug (538 bytes, text/html)
2011-12-07 00:23 PST, chrisnzl
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description chrisnzl 2011-12-07 00:23:48 PST
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.
Comment 1 Shane Stephens 2012-06-27 21:32:30 PDT
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)).
Comment 2 chrisnzl 2012-06-27 23:23:51 PDT
Seems like this has been fixed?

Windows 7, Safari 5.1.7, no more black glitches.
Comment 3 Dirk Schulze 2012-11-21 22:18:50 PST
Works for me as well. Closing bug.