Firefox中backdrop-filter: blur()与mix-blend-mode: difference共存问题

问题原因 #

这不是浏览器Bug，是Firefox当前对这两个CSS属性的组合支持存在限制。Firefox中backdrop-filter会创建一个隔离的渲染上下文，而mix-blend-mode需要与父级上下文交互，两者的渲染机制冲突，导致同时使用时其中一个属性失效。Chrome的渲染逻辑做了兼容处理，所以能正常显示两者的组合效果。

解决方案：嵌套元素分离属性 #

通过将两个属性分别应用在嵌套的父子元素上，绕开渲染上下文冲突：

• 父元素应用mix-blend-mode，并设置background: transparent保证混合效果正常作用于背景
• 子元素填充父元素空间，单独应用backdrop-filter

修改后的代码示例 #

HTML

<div class="background">
  <div class="card card1"></div>
  <div class="card card2"></div>
  <div class="card card3">
    <div class="card3-inner"></div>
  </div>
</div>

CSS

.background {
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2094&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.card {
  height: 200px;
  width: 200px;
  border: 1px solid #fff;
}

.card1 {
  mix-blend-mode: difference;
}

.card2 {
  backdrop-filter: blur(20px);
}

.card3 {
  mix-blend-mode: difference;
  background: transparent;
  position: relative;
}

.card3-inner {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px);
  border: inherit;
}

这个方案通过分离两个属性的作用元素，避免了渲染上下文的冲突，在Firefox和Chrome中都能正常实现模糊背景+混合模式的效果。

内容的提问来源于stack exchange，提问作者newbieCoder.pkg