Bug 135318 – REGRESSION (r163382): Overflow hidden for inner elements breaks blurring

• Component: CSS
• Status: RESOLVED FIXED

[Jonathan Stanton]

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;
}

[Alexey Proskuryakov]

This is a regression from Safari 7.0.5.

[Simon Fraser (smfr)]

Regressed in r163382.

[Dirk Schulze]

I can reproduce this bug in Blink as well.

[Mihnea Ovidenie]

Looking

[Radu Stavila]

Created attachment 235886 [details]
Patch

[alan]

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]

Created attachment 236093 [details]
Patch integrating reviewer feedback

[WebKit Commit Bot]

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]

All reviewed patches have been landed.  Closing bug.