我和我的团队使用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中添加了transparent
和top
的left
边距为<body>
。
将鼠标悬停在Google Chrome浏览器的tabs bar
上,您会发现模糊线条的视觉故障。
假设:由于此.html
文件的简约性质,我的团队认为这是Chrome浏览器中的“伪像”,通常为0px
,不可见。当将使用backdrop-filter
的blur
应用于position: fixed
<div>
时,将显示此不可见的伪像,并从height
给出“伪像”伪-blur
。
问题:如何显示“故障伪像”以显示[[NOT,并且仍然可以将backdrop-filter
与blur()
一起使用?
https://bugs.chromium.org/p/chromium/issues/detail?id=986206