使用 CSS 'backdrop-filter:blur' 在 Chrome 中呈现/闪烁/故障问题
Posted
技术标签:
【中文标题】使用 CSS \'backdrop-filter:blur\' 在 Chrome 中呈现/闪烁/故障问题【英文标题】：Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'使用 CSS 'backdrop-filter:blur' 在 Chrome 中呈现/闪烁/故障问题 【发布时间】：2020-01-04 06:55:00 【问题描述】：我确实遇到了使用背景过滤器的渲染问题：blur(12px);在 MacOS Mojave 上的 Chrome 76 中。每当我开始将鼠标悬停在 Chrome 中打开的选项卡上时，使用背景过滤器的 div 开始闪烁，并且 div 被细分为具有不同颜色的较小矩形，并被带有阴影的水平线分割。
我不知道这是渲染问题、故障、溢出问题还是只是 Chrome 中的错误。
Here 是小提琴。
我已经尝试过以下变体：
转换：translateZ(0); 背面可见性：隐藏； 溢出：隐藏； 边距：0 将改变：顶部； 位置：静态；似乎没有任何效果。
小例子：
<html>
<head>
</head>
<body>
<div id="articleViewOverlay" class="articleViewOverlay">
</div>
</body>
</html>
.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;
【问题讨论】：
这是重现这种奇怪行为的另一个示例：jsfiddle.net/jxkfh9b8/embedded/result 当我将鼠标移到浏览器选项卡上时，整个浏览器开始闪烁（Chrome 79、Mac OS X El Capitan）... 【参考方案1】：根据您的描述，我猜您遇到的是this bug。如果是这样，请随意标记该错误（左上角）以获取更新。目前没有任何解决方法，但它正在进行中。
【讨论】：
这正是我一直面临的问题。谢谢！ :) 我猜我只需要等待修复。在那之前，我将只对显示的模态下方的元素进行简单的模糊处理。 为了后代，此错误已在 Chrome 79 及更高版本中修复。【参考方案2】：我遇到了同样的问题，将这个添加到被模糊的元素中修复它：
-webkit-transform:translate3d(0,0,0);
因为如果强制 gpu 渲染
【讨论】：
【参考方案3】：该错误是 Chrome 内部版本 79.0.3945.1（2019 年 10 月 16 日）中的 fixed
【讨论】：
我仍然在 Chrome 80.0.3987.149 中体验到那些大闪。刚刚重新创建它打开我在 OP cmets 中发布的 JSFiddle：将鼠标移到选项卡、地址栏、书签上会使巨大的闪烁...更新：也使用 OP fiddle... @neoDev 有趣...我在 80.0.3987.132 上，我自己的项目（和小提琴）中的问题现在已修复 我在 Chrome 80.0.3987.149 上，但错误仍然存在 还没有修复... 在 chrome 97 上仍然是一个问题。以上是关于使用 CSS 'backdrop-filter:blur' 在 Chrome 中呈现/闪烁/故障问题的主要内容，如果未能解决你的问题，请参考以下文章