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

问题描述 投票:0回答:1

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

Version 78.0.3904.108 (Official Build) (64-bit)起,[我当前的Google Chrome浏览器位于MacOS Mojave Version 10.14.6上为(Dec 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标签的默认css中添加了transparenttopleft边距为<body>

将鼠标悬停在Google Chrome浏览器的tabs bar上,您会发现模糊线条的视觉故障。

假设:由于此.html文件的简约性质,我的团队认为这是Chrome浏览器中的“伪像”,通常为0px,不可见。当将使用backdrop-filterblur应用于position: fixed <div>时,将显示此不可见的伪像,并从height给出“伪像”伪-blur

问题:如何显示“故障伪像”以显示[[NOT,并且仍然可以将backdrop-filterblur()一起使用?

html css google-chrome visual-glitch
1个回答
0
投票
在寻找答案时,我遇到了这篇铬文章:

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

© www.soinside.com 2019 - 2024. All rights reserved.