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

Question

浏览器版本为 Chrome 87.0.4280.88

这是我偶然发现这个错误的方法:

• There are two independent divs on the page and both are position: fixed;
• One of them has a hover effect with which its mix-blend-mode is changed.
• The other one has glassmorphism style on it with backdrop-filter: blur(...px);
• The filter works only when the other element on the page is set to mix-blend-mode: normal; otherwise it looks like as if it was not supported.

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

Answer 1

也遇到过这个错误(Chrome 90)。

快速修复:

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

示例:

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