16

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>

3 Answers 3

15

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

3
10

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>

1
  • 3
    This doesn't seem to work, it only disables the blur effect entirely. Commented Dec 26, 2018 at 10:15
1

This is too old question and I'm answering this same late!

.background {
    background-image: url(https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg);
    padding: 30px;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}


/*put blur feature here. */

p:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  backdrop-filter: blur(30px);
  z-index: -1;
}
<div class="background">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor, risus sed faucibus tincidunt, quam lacus euismod nisi, vel vulputate nulla</p>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.