时间戳

首页 > 解决方案 > `backdrop-filter: blur()` 在 MacOS 上使用 Google-Chrome 会导致不需要的伪影

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

问题描述

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

我当前的 Google Chrome 浏览器为( Version 78.0.3904.108 (Official Build) (64-bit))MacOS Mojave Version 10.14.6Dec 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默认 css 添加的。<body>

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

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

问题：如何让“故障伪影”不出现，并且仍然可以使用backdrop-filterwith blur()？

标签： htmlcssgoogle-chromevisual-glitch

解决方案

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

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

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

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

推荐阅读