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)
Created attachment 21282 [details] testcase
Created attachment 21298 [details] more dramatic demonstration
Great test cases. Thanks!
This can probably happens when applying any mask to any transformed box.
Created attachment 26404 [details] Screenshot
rdar://6608800
*** Bug 30040 has been marked as a duplicate of this bug. ***
Very obvious example: <http://media.24ways.org/2009/15/spinner.html>
*** Bug 27832 has been marked as a duplicate of this bug. ***
rdar://6608800 is a different issue. We need a new Radar report.
<rdar://problem/7655359>
*** Bug 39248 has been marked as a duplicate of this bug. ***
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();
Created attachment 70144 [details] Patch
http://trac.webkit.org/changeset/69334