RESOLVED FIXED 135318
REGRESSION (r163382): Overflow hidden for inner elements breaks blurring
https://bugs.webkit.org/show_bug.cgi?id=135318
Summary REGRESSION (r163382): Overflow hidden for inner elements breaks blurring
Jonathan Stanton
Reported 2014-07-25 23:00:04 PDT
If I have a outer element that has a border radius and overflow hidden, and an inner element that is blurred: Expected Behavior: My inner element should be blurred and clipped. Actual Behavior: My inner element is clipped but no longer blurred. Example: http://codepen.io/JAStanton/pen/zyDov Example HTML: <div class="circle"> <div class="inner"></div> </div> Example CSS: .circle { width: 300px; height: 300px; background-color: #f5ad61; /* TOGGLE THESE PROPERTY: */ /* overflow: hidden; border-radius: 50% 50%; */ } .inner { -webkit-filter: blur(21px); background: rgba(0,0,0,0.4); height: 63px; width: 216px; }
Attachments
Patch (5.63 KB, patch)
2014-08-01 04:49 PDT, Radu Stavila
zalan: review-
Patch integrating reviewer feedback (8.09 KB, patch)
2014-08-06 05:31 PDT, Radu Stavila
no flags
Alexey Proskuryakov
Comment 1 2014-07-28 23:40:34 PDT
This is a regression from Safari 7.0.5.
Simon Fraser (smfr)
Comment 2 2014-07-29 11:11:12 PDT
Regressed in r163382.
Dirk Schulze
Comment 3 2014-07-29 11:42:19 PDT
I can reproduce this bug in Blink as well.
Mihnea Ovidenie
Comment 4 2014-07-29 23:46:35 PDT
Looking
Radu Stavila
Comment 5 2014-08-01 04:49:08 PDT
zalan
Comment 6 2014-08-01 09:49:29 PDT
Comment on attachment 235886 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=235886&action=review > Source/WebCore/rendering/RenderLayer.cpp:3597 > if (clipRect.rect() != paintingInfo.paintDirtyRect || clipRect.hasRadius()) { > context->save(); > - LayoutRect adjustedClipRect = clipRect.rect(); > - adjustedClipRect.move(paintingInfo.subpixelAccumulation); > - context->clip(pixelSnappedForPainting(adjustedClipRect, deviceScaleFactor)); > + > + // Clipping for border radius will be applied later in this method. > + if (!clipRect.hasRadius()) { > + LayoutRect adjustedClipRect = clipRect.rect(); > + adjustedClipRect.move(paintingInfo.subpixelAccumulation); > + context->clip(pixelSnappedForPainting(adjustedClipRect, deviceScaleFactor)); > + } Now the if() gets highly confusing and almost no-op in case of cliprect has radius. I think it's time to branch out the radius and non-radius case properly. Simply when the clip rect has radius, you want the the rounded cliprect applied, while in case of no radius, the normal clip should be set. I never liked the if (!clipRect.hasRadius()) return; further down in the function anyway.
Radu Stavila
Comment 7 2014-08-06 05:31:36 PDT
Created attachment 236093 [details] Patch integrating reviewer feedback
WebKit Commit Bot
Comment 8 2014-08-06 08:06:25 PDT
Comment on attachment 236093 [details] Patch integrating reviewer feedback Clearing flags on attachment: 236093 Committed r172146: <http://trac.webkit.org/changeset/172146>
WebKit Commit Bot
Comment 9 2014-08-06 08:06:31 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.