Backdrop Filter extends beyond Border Radius

Asked 2/4, 2016 at 20:44 Answered 8/2 at 14:52

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>

Russia answered 2/4, 2016 at 20:44 Comment(0)

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

Bailor answered 21/5, 2016 at 1:13 Comment(3)

I just ran in to this problem and it's fixed in Safari Technology Preview 6. – Gastrectomy 16/6, 2016 at 13:46

@AsaCarter good! Have you tested it on the latest stable Safari update? – Bailor 17/6, 2016 at 1:20

It is still a bug on Chrome 71.0.3578.98: bugs.chromium.org/p/chromium/issues/detail?id=547937 – Helle 26/12, 2018 at 10:22

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>

Nurserymaid answered 8/7, 2016 at 7:17 Comment(1)

This doesn't seem to work, it only disables the blur effect entirely. – Helle 26/12, 2018 at 10:15

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>

Decoy answered 8/2 at 14:52 Comment(0)

You just found a bug!

Recommended topics

Hot tags