[Webkit-unassigned] [Bug 135318] New: overflow hidden for inner elements that are blurred breaks

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Jul 25 22:59:50 PDT 2014


https://bugs.webkit.org/show_bug.cgi?id=135318

           Summary: overflow hidden for inner elements that are blurred
                    breaks
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh
               URL: http://codepen.io/JAStanton/pen/zyDov
        OS/Version: Mac OS X 10.9
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: jonathan.a.stanton at gmail.com


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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.



More information about the webkit-unassigned mailing list