Backdrop Filter extends beyond Border Radius

前端未结

关注

 2  2025

I\'m trying to use the CSS backdrop-filter and border-radius together, but the backdrop filter appears to extend beyond the border radius.

相关标签:

2条回答

情书的邮戳

2021-01-17 13:51
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. ;)
0 讨论(0)
发布评论:

提交评论
- 加载中...

无人共我

2021-01-17 14:06

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>

0 讨论(0)

Backdrop Filter extends beyond Border Radius

You just found a bug!