73988 2011-12-07 00:23:48 -0800 CSS masking on rotated child elements creates black glitchy squares 2012-11-21 22:18:50 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED WORKSFORME P2 Normal --- 0 chrisnzl webkit-unassigned krit shanestephens oldest_to_newest 516521 0 118180 chrisnzl 2011-12-07 00:23:48 -0800 Created attachment 118180 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. 659159 1 shanestephens 2012-06-27 21:32:30 -0700 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)). 659246 2 chrisnzl 2012-06-27 23:23:51 -0700 Seems like this has been fixed? Windows 7, Safari 5.1.7, no more black glitches. 773566 3 krit 2012-11-21 22:18:50 -0800 Works for me as well. Closing bug. 118180 2011-12-07 00:23:48 -0800 2011-12-07 00:23:48 -0800 Basic HTML and CSS to reproduce this bug black-squares.html text/html 538 chrisnzl PGh0bWw+DQo8aGVhZD4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJZGl2IHsNCgkJZGlzcGxh eTogaW5saW5lLWJsb2NrOw0KCQktd2Via2l0LXRyYW5zZm9ybS1zdHlsZTogcHJlc2VydmUtM2Q7 DQoJfQ0KCWJvZHkgPiBkaXYgew0KCQktd2Via2l0LXRyYW5zZm9ybTogcm90YXRlWCg2MGRlZykg cm90YXRlKDQ1ZGVnKTsNCgkJcG9zaXRpb246IGFic29sdXRlOw0KCQlsZWZ0OiA0MCU7DQoJCXRv cDogNTAlOw0KCX0NCglib2R5ID4gZGl2ID4gZGl2IHsNCgkJLXdlYmtpdC10cmFuc2Zvcm06IHJv dGF0ZVkoOTBkZWcpOw0KCQktd2Via2l0LW1hc2stYm94LWltYWdlOiB1cmwoaHR0cDovL3d3dy53 ZWJraXQub3JnL2Jsb2ctZmlsZXMvdmlnbmV0dGUtbWFzay5wbmcpOw0KCQliYWNrZ3JvdW5kLWNv bG9yOiBwaW5rOw0KCQl3aWR0aDogNTBweDsNCgkJaGVpZ2h0OiA1MHB4Ow0KCX0NCjwvc3R5bGU+ DQo8L2hlYWQ+DQo8Ym9keT4NCgk8ZGl2Pg0KCQk8ZGl2PjwvZGl2Pg0KCQk8ZGl2PjwvZGl2Pg0K CTwvZGl2Pg0KPC9ib2R5Pg0KPC9odG1sPg==