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

问题描述

浏览器版本为 Chrome 87.0.4280.88

这是我无意中发现此错误的方式：

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

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

解决方法

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

快速修复：

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

示例：

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