Backdrop Filter超出边界半径 [英] Backdrop Filter extends beyond Border Radius
问题描述
我试图一起使用CSS backdrop-filter 和 border-radius ，但背景滤镜似乎超出了边界的范围。
body {background-attachment：fixed;背景颜色：＃541B84; background-image：url（https://source.unsplash.com/random）;背景位置：50％50％; background-size：cover;身高：100％ width：100％;}。con {-webkit-backdrop-filter：blur（1rem）饱和（200％）;模糊（1rem）饱和（200％）;背景：rgba（247,247,249,0.8）;边界半径：100％; font-size：7rem; font-weight：300;身高：11rem;行高：1.5;保证金：1rem汽车;宽度：11rem; text-align：center;} < body> < div class =con> KM< / div>< / body>
这是一个 bug code>在WebKit的背景滤镜 CSS属性的实现上。它没有考虑过滤器的 border-radius 定界符 - 即使使用 overflow：hidden; / p>
对于 clip-path 也是如此，或者使用 background-filter ，截至2016年5月21日，最新的WebKit Nightly Build还没有解决。
虽然这个问题没有解决，但有三个选择：
$ b
- 等待修复实现该功能。
- 无论如何实现了越野车功能，因为它不是你的代码的问题。
- 使用javascript代替。
在这个问题不太明显的情况下（即 border-radius：5px; ），我会坚持使用第二个选项，并且完全避免使用它当错误变得明显时（比如在你的代码片段中）。
编辑：
Webkit Bugzilla bug报告已于2016/05/25关闭，因为补丁已经着陆。更正是在最新的webkit每晚构建中可见的。 ;）
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>
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. ;)
这篇关于Backdrop Filter超出边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
