Chrome中使用CSS'backdrop-filter:blur'的渲染/闪烁/小故障问题 [英] Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'
问题描述
我确实使用背景滤镜遇到渲染问题:blur(12px);在MacOS Mojave上的Chrome 76中.每当我开始用鼠标悬停在Chrome中打开的选项卡上时，使用背景滤镜的div就会开始闪烁，并且div会细分为具有不同颜色的较小矩形，并被带有阴影的水平线分开.
I do face a rendering problem using backdrop-filter: blur(12px); in Chrome 76 on MacOS Mojave. Whenever I start to hover with my mouse over the opened tabs in Chrome, the div using the backdrop-filter starts flickering and the div is subdivided into smaller rectangles having different colors and are split by horizontal lines with shadows.
我不知道这是渲染问题，故障，某些溢出问题还是Chrome中的错误.
I don't know if it's a rendering problem, a glitch, some overflow problem or just a bug in Chrome.
这里是小提琴.
我已经尝试过以下版本:
I already tried variations of:
- transform:translateZ(0);
- 背面可见性:隐藏；
- 溢出:隐藏；
- 保证金:0
- will-change:top;
- 位置:静态；
似乎没有任何作用.
最小示例:
<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;
}
推荐答案
根据您的描述，我猜您是在遇到此错误.如果是这样，请随时给该错误加注星标(左上角)以获取更新.目前尚无任何解决方法，但仍在进行中.
From your description, my guess is that you're encountering this bug. If so, feel free to star that bug (top-left corner) to get updates. There aren't any workarounds at this point, but it's work in progress.
这篇关于Chrome中使用CSS'backdrop-filter:blur'的渲染/闪烁/小故障问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
