`backdrop-filter: blur()` 在 MacOS 上使用 Google-Chrome 会导致不需要的伪影答案

【问题标题】：`backdrop-filter: blur()` using Google-Chrome on MacOS causes unwanted artifacts`backdrop-filter: blur()` 在 MacOS 上使用 Google-Chrome 会导致不需要的伪影
【发布时间】：2020-03-27 14:14:44
【问题描述】：

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

截至Dec 02, 2019，我当前的 Google Chrome 浏览器是 (Version 78.0.3904.108 (Official Build) (64-bit)) 在 MacOS Mojave Version 10.14.6 上

<!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) 页面，在top 和left 上添加了8px 和transparent 边距，这是从<body> 标记的默认css 添加的。

将鼠标悬停在 Google Chrome 的 tabs bar 上，您会注意到一条模糊线的视觉故障。

假设：由于这个 .html 文件的简约性质，我的团队认为它是来自 Chrome 浏览器的“人工制品”，通常是 0px 并且不可见。当使用blur 的backdrop-filter 应用于position: fixed <div> 时，会显示此不可见的工件，并给出来自blur 的“工件”psudo-height。

问题：我如何让“故障工件”不显示出来，并且仍然能够将backdrop-filter 与blur() 一起使用？

【问题讨论】：

您也可以添加图像示例吗？我没有看到任何工件 Chrome 78.0.3904.108 (Official Build) (64-bit) MacOS 10.15.1

标签： html css google-chrome visual-glitch

【解决方案1】：

backdrop-filter 可能导致许多错误，可能比您在此问题中确定的错误更多。使用它可能不值得，因为它仍然是实验性的，并且无论如何都没有完整的浏览器支持。

见：https://caniuse.com/#feat=css-backdrop-filter

我的建议是做类似this 的事情，这并不是真正使用backdrop-filter: blur()，但具有相同的效果。或使用该问题中的其他方法。从长远来看，它将完全避免backdrop-filter 问题。

目前没有针对您描述的问题的解决方法或修复程序。请参阅this answer 以了解有关此相同 CSS 功能的类似问题。

【讨论】：

【解决方案2】：

在寻找答案时，我发现了这篇 Chromium 文章：

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

【讨论】：

【解决方案3】：

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

这与原始的html白色背景有关

这是一个帮助我的链接： https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

【讨论】：