[Webkit-unassigned] [Bug 73988] New: CSS masking on rotated child elements creates black glitchy squares

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=73988

           Summary: CSS masking on rotated child elements creates black
                    glitchy squares
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: chrisnzl at xnet.co.nz


Created an attachment (id=118180)
 --> (https://bugs.webkit.org/attachment.cgi?id=118180&action=review)
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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.