Menu
I'm trying to use the CSS backdrop-filter and border-radius together, but the backdrop filter appears to extend beyond the border radius.
body {
background-attachment: fixed;
background-color: #541B84;
background-image: url("https://source.unsplash.com/random");
background-position: 50% 50%;
background-size: cover;
height: 100%;
width: 100%;
}
.con {
-webkit-backdrop-filter: blur(1rem) saturate(200%);
backdrop-filter: blur(1rem) saturate(200%);
background: rgba(247, 247, 249, 0.8);
border-radius: 100%;
font-size: 7rem;
font-weight: 300;
height: 11rem;
line-height: 1.5;
margin: 1rem auto;
width: 11rem;
text-align: center;
}<body>
<div class="con">KM</div>
</body>
949
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
BROWSER SUPPORT FOR CSS Backdrop Filter This property is not supported by default but can be enabled for Chrome 47 to 67.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Until this fix is released, you can avoid this bug by using a 0px blur as a backdrop filter on the parent element. This requires the overflow to be hidden, so the edges of the K and M in your example are no longer visible.
body {
background: url("https://source.unsplash.com/random") center /cover;
height: 100%;
width: 100%;
}
.con {
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
margin: 1rem auto;
width: 11rem;
height: 11rem;
overflow: hidden;
border-radius: 50%;
font-size: 7rem;
font-weight: 300;
line-height: 1.5;
text-align: center;
position: relative;
}
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-backdrop-filter: blur(0.1em);
backdrop-filter: blur(0.1em);
border-radius: 50%;
margin: -1px;
}<body>
<div class="con">
<div class="inner">KM</div>
</div>
</body>This is a bug on WebKit's implementation of the backdrop-filter CSS property. It does not account for the border-radius delimitation of the filter – not even when using overflow: hidden;.
The same is true for clip-path or pretty much any masking property applied to elements using backdrop-filter, and it remains unsolved in the latest WebKit Nightly Build, as of May 21, 2016.
While this problem is not solved, you have three options:
I would stick with the second option in cases where this issue is not too noticeable (i.e. border-radius: 5px;) and avoid using it at all when the bug becomes graphically obvious (like in your snippet).
Here's the bug report at the WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=142662
EDIT:
Webkit Bugzilla bug report was closed on 2016/05/25 since patch have been landed. The correction is visible on the newest webkit nightly build. ;)
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
