Edge fringe artifact with transformed, masked elements (including reflections)

• Component: CSS
• Status: RESOLVED FIXED

[CJ Yetman]

When adding a reflection with -webkit-box-reflect that has a gradient mask... if you also use -webkit-transform: skew, you will see a line at the edge of the reflected image. You will not see the line if the skew is removed or set to 0 degrees. Probably just something to do with the anti-aliasing of the gradient or the skewed image, but there should be some way to resolve it. Sorry, I don't know all the proper terminology, so I'll just attach a test case.

(Tested on latest nightly r33980)

[CJ Yetman]

Created attachment 21282 [details]
testcase

[CJ Yetman]

Created attachment 21298 [details]
more dramatic demonstration

Great test cases. Thanks!

This can probably happens when applying any mask to any transformed box.

[Simon Fraser (smfr)]

Created attachment 26404 [details]
Screenshot

[David Harrison]

rdar://6608800

*** Bug 30040 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Very obvious example:
<http://media.24ways.org/2009/15/spinner.html>

[Simon Fraser (smfr)]

*** Bug 27832 has been marked as a duplicate of this bug. ***

[Darin Adler]

rdar://6608800 is a different issue. We need a new Radar report.

<rdar://problem/7655359>

[Simon Fraser (smfr)]

*** Bug 39248 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

Maybe fix:

diff --git a/WebCore/rendering/RenderBox.cpp b/WebCore/rendering/RenderBox.cpp
index d54af1f..8b643b4 100644
--- a/WebCore/rendering/RenderBox.cpp
+++ b/WebCore/rendering/RenderBox.cpp
@@ -814,6 +814,11 @@ void RenderBox::paintMaskImages(const PaintInfo& paintInfo, int tx, int ty, int
     bool allMaskImagesLoaded = true;
     
     if (!compositedMask) {
+        // If the context has a rotation, scale or skew, then use a transparency layer to avoid
+        // pixel cruft around the edge of the mask.
+        AffineTransform currentCTM = paintInfo.context->getCTM();
+        pushTransparencyLayer = !currentCTM.isIdentityOrTranslationOrFlipped();;
+
         StyleImage* maskBoxImage = style()->maskBoxImage().image();
         const FillLayer* maskLayers = style()->maskLayers();

[Simon Fraser (smfr)]

Created attachment 70144 [details]
Patch

[Simon Fraser (smfr)]

http://trac.webkit.org/changeset/69334