gpt4 book ai didi

html - 使用 CSS 'backdrop-filter:blur' 在 Chrome 中呈现/闪烁/故障问题

转载 作者:行者123 更新时间:2023-11-28 09:54:29 128 4
gpt4 key购买 nike

我确实遇到了使用 backdrop-filter: blur(12px); 的渲染问题。在 MacOS Mojave 上的 Chrome 76 中。每当我开始将鼠标悬停在 Chrome 中打开的选项卡上时,使用 backdrop-filter 的 div 开始闪烁,div 被分割为具有不同颜色的较小矩形,并被带阴影的水平线分割。

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

Here是 fiddle 。

我已经尝试过以下变体:

  • 转换:translateZ(0);
  • 背面可见性:隐藏;
  • 溢出:隐藏;
  • margin :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;
}

最佳答案

根据您的描述,我猜您遇到的是 this bug .如果是这样,请随时为该错误加注星标(左上角)以获取更新。目前没有任何解决方法,但它正在进行中。

关于html - 使用 CSS 'backdrop-filter:blur' 在 Chrome 中呈现/闪烁/故障问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57736567/

128 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com