使用 CSS 'backdrop-filter:blur' 在 Chrome 中渲染/闪烁/故障问题

Question

使用 CSS 'backdrop-filter:blur' 在 Chrome 中渲染/闪烁/故障问题

Geo*_*org 6 html css macos google-chrome

我确实面临使用背景过滤器的渲染问题：blur(12px); 在 MacOS Mojave 上的 Chrome 76 中。每当我开始将鼠标悬停在 Chrome 中打开的选项卡上时，使用背景过滤器的 div 开始闪烁，并且 div 被细分为具有不同颜色的较小矩形，并由带有阴影的水平线分割。

我不知道这是渲染问题、故障、溢出问题还是只是 Chrome 中的错误。

这是小提琴。

我已经尝试过以下变体：

变换：translateZ(0);
背面可见性：隐藏；
溢出：隐藏；
保证金：0
将改变：顶部；
位置：静态；

似乎没有任何效果。

最小示例：

<html>
<head>
</head>

<body>
    <div id="articleViewOverlay" class="articleViewOverlay">
    </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

.articleViewOverlay {
    position: fixed;
    width: 200px;
    height: 200px;
    border-style: dashed;
    backdrop-filter: blur(12px);
    background-color: rgba(125, 125, 125, 0.4); 
    margin: 0; 
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mas*_*eed 5

根据您的描述，我猜测您遇到了这个错误。如果是这样，请随时为该错误（左上角）加注星标以获取更新。目前还没有任何解决方法，但工作正在进行中。

这正是我一直面临的问题。谢谢你！:) 我想我只需要等待修复即可。在那之前，我将仅对显示的模态下方的元素进行简单的模糊处理。 (2认同)

归档时间：	6 年，10 月前
查看次数：	3015 次
最近记录：	4 年，10 月前