Chrome中mix-blend-mode结合backdrop-filter: blur触发画面异常问题

你遇到的是Windows平台Chrome浏览器的渲染bug，当同时使用backdrop-filter: blur和mix-blend-mode时，标签页区域的鼠标交互会触发画面异常。以下是几个可行的修复方案：

方案1：添加GPU加速触发属性 #

给应用了backdrop-filter的.blur-leftside元素添加transform: translateZ(0)，强制触发GPU渲染路径，修复渲染冲突：

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
}

.background {
  background-color: #0000ff;
}

.blur-leftside {
  width: 50vw;
  height: 100vh;
  backdrop-filter: blur(15px);
  mix-blend-mode: soft-light;
  background: #ffffff;
  /* 添加以下属性触发GPU加速 */
  transform: translateZ(0);
}

方案2：拆分模糊与混合模式层级 #

如果方案1无效，可以将backdrop-filter和mix-blend-mode拆到两个独立元素上，避免渲染属性冲突：

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
}

.background {
  background-color: #0000ff;
  position: relative;
  width: 100%;
  height: 100vh;
}

.blur-leftside {
  width: 50vw;
  height: 100%;
  backdrop-filter: blur(15px);
  background: #ffffff;
}

/* 单独创建混合模式层 */
.blend-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100%;
  background: #ffffff;
  mix-blend-mode: soft-light;
  pointer-events: none; /* 不干扰页面交互 */
}

对应的HTML调整：

<html>
  <body>
    <div class="background">
      <div class="blur-leftside"></div>
      <div class="blend-overlay"></div>
    </div>
  </body>
</html>

方案3：禁用Chrome硬件加速（备选） #

如果以上方案都无效，可以尝试关闭Chrome的硬件加速（仅作最后备选，会降低整体渲染性能）：

• 打开Chrome设置，搜索“硬件加速”
• 取消勾选“可用时使用硬件加速”
• 重启Chrome

内容的提问来源于stack exchange，提问作者Phoax