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

Question

浏览器版本为Chrome 87.0.4280.88

以下是我无意中发现此错误的方法：

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

无论如何，我现在将停止使用悬停效果，但如果有一个技巧，那么让世界知道它会很高兴。

Answer 1

也遇到了这个错误（Chrome 90）。

快速解决：

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

例子：

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