当页面上另一个元素的混合模式被改变时，背景滤镜不起作用

Question

浏览器版本为Chrome 87.0.4280.88

下面是我如何意外发现这个bug的:

• 页面上有两个独立的div，它们都是position: fixed;
• 其中一个具有悬停效果，可以改变其mix-blend-mode。
• 另一个带有backdrop-filter: blur(...px);的玻璃态风格
• 过滤器只在页面上的其他元素被设置为mix-blend-mode: normal;时起作用，否则看起来好像不支持它。

无论如何，我现在要停止使用悬停效果，但如果有什么技巧，那么最好让全世界都知道。

Answer 1

我也遇到过这个bug (Chrome 90)。

快速修复:

将backdrop-filter规则添加到应用了mix-blend-mode规则的同一元素中。

例子:

.blend {
mix-blend-mode: difference;
backdrop-filter: opacity(1); /* fixes the chrome-bug */
}

Answer 2

之前的解决方案也适用于我(Chrome 93)。虽然我不得不将我的元素包装在另一个元素中，并将mix-blend-mode应用于它，使它像这样工作:

.wrapper {
mix-blend-mode: multiply;
}

.blend { 
backdrop-filter: opacity(1);
}

为我节省很多时间。非常感谢!