WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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-
Details
Formatted Diff
Diff
Patch integrating reviewer feedback
(8.09 KB, patch)
2014-08-06 05:31 PDT
,
Radu Stavila
no flags
Details
Formatted Diff
Diff
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
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
Created
attachment 235886
[details]
Patch
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.
Top of Page
Format For Printing
XML
Clone This Bug