Jam*_*sex 3 html css google-chrome visual-glitch
我和我的团队在使用Google Chrome 时遇到了这个视觉故障。我已将视觉故障与其最简单的元素隔离开来。通过.html使用以下代码创建一个新文件并在 chrome 中打开它来重新创建故障。
我目前的谷歌浏览器（Version 78.0.3904.108 (Official Build) (64-bit)）上的MacOS Mojave Version 10.14.6作为Dec 02, 2019
<!doctype html>
<div
style="
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.3);
backdrop-filter: blur(5px);
"
>
</div>您应该会看到一个大部分为“灰色”的rgba(0,0,0,.3)页面，其中8px有transparent边距，top并且是left从<body>标签的默认 css添加的。
将鼠标悬停在 Google Chrome 上tabs bar，您会注意到一条模糊线的视觉故障。
假设：由于此.html文件的简约性质，我的团队认为它是 Chrome 浏览器中的“人工制品”，通常0px不可见。当backdrop-filterusingblur应用于 时，将position: fixed <div>显示此不可见的工件，并height从blur.
问：我如何获得了“毛刺神器”，以不显示出来，并且仍然能够使用backdrop-filter与blur()？
backdrop-filter可能会导致许多错误，可能比您在此问题中确定的错误更多。使用它可能不值得，因为它仍然是实验性的并且无论如何都没有完整的浏览器支持。
请参阅：https : //caniuse.com/#feat=css-backdrop-filter
我的建议是做一些像这样，这是不是真正使用backdrop-filter: blur()，但有同样的效果。或者使用该问题中的其他方法。从长远来看，它将backdrop-filter完全避免这些问题。
目前没有针对您描述的问题的解决方法或修复程序。请参阅有关此相同 CSS 功能的类似问题的答案。
| 归档时间： |
|
| 查看次数： |
1210 次 |
| 最近记录： |