Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backdrop Filter extends beyond Border Radius

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>
like image 949
Kristian Matthews Avatar asked Apr 02 '16 20:04

Kristian Matthews


People also ask

How does backdrop filter work?

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.

Is backdrop filter supported?

BROWSER SUPPORT FOR CSS Backdrop Filter This property is not supported by default but can be enabled for Chrome 47 to 67.

What does border-radius mean?

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.


2 Answers

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>
like image 76
Stephen Hutchings Avatar answered Oct 19 '22 17:10

Stephen Hutchings


You just found a bug!

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:

  • Wait for the fix to implement the feature.
  • Implement the buggy feature anyway because it's not your code's problem.
  • Use javascript instead.

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. ;)

like image 30
Tiago Marinho Avatar answered Oct 19 '22 18:10

Tiago Marinho