Question

我和我的团队使用 Google Chrome 遇到了这种视觉故障。我已将视觉故障隔离到其最简单的元素。通过使用下面的代码创建一个新的.html文件并在chrome中打开它，可以重新创建故障。

自Version 78.0.3904.108 (Official Build) (64-bit)起，我当前的Google Chrome浏览器位于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的{{1}}边距为top，并且从默认CSS添加left标签的

。

将鼠标悬停在Google Chrome浏览器的<body>上，您会看到模糊线条的视觉故障。

假设：由于此tabs bar文件的简约性质，我的团队认为这是Chrome浏览器中的“伪像”，通常为.html，并且不可见。将使用0px的{{1}}应用于backdrop-filter blur时，将显示此不可看见的伪像，从而给出{的伪像{1}}。

问题：如何显示“故障伪像”以不显示，并且仍然可以将position: fixed与<div>一起使用？

Answer 1

backdrop-filter可能导致许多错误，可能比您在此问题中确定的错误还要多。可能不值得使用此功能，因为它仍处于试验阶段，并且仍然没有完全的浏览器支持。

请参阅：http://server-name:8080

我的建议是做类似https://caniuse.com/#feat=css-backdrop-filter的事情，这并不是真正地使用backdrop-filter: blur()，但效果相同。或使用该问题的其他方法。从长远来看，它将完全避免backdrop-filter问题。

目前，您所描述的问题没有变通办法或修补程序。关于相同的CSS功能，请向this提问类似的问题。

Answer 2

在寻找答案时，我遇到了这篇Chromium文章：

https://bugs.chromium.org/p/chromium/issues/detail?id=986206

Answer 3

试试这个：背景附件：固定

它与原始 html 白色背景有关

这是一个对我有帮助的链接：

在MacOS上使用Google-Chrome的`backdrop-filter：blur（）`会导致不必要的伪像

3 个答案: