backdrop-filter:blur遇mix-blend-mode时异常的技术咨询

问题概述 #

元素设置 backdrop-filter: blur(10px) 后效果正常，但当页面存在使用 mix-blend-mode 的元素时，Chrome/Edge 浏览器中会出现模糊效果与未模糊背景混合显示的问题，Firefox 无此异常。CodePen 测试显示添加 mix-blend-mode 会立即触发该问题。

结论 #

这是 Chromium 内核浏览器的已知渲染 Bug，并非你遗漏了配置项。

原因解析 #

Chromium 对 backdrop-filter 和 mix-blend-mode 的合成层处理逻辑存在冲突：当页面中有带混合模式的元素时，浏览器的合成层管理会出现异常，导致应用了 backdrop 模糊的元素渲染层与原始未模糊的背景层发生叠加混合，从而出现双重显示的问题。Firefox 的 Gecko 引擎对这两个属性的兼容性处理更完善，因此未触发该问题。

临时修复方案 #

可以通过以下几种方式规避该问题：

• 给应用 backdrop-filter 的元素添加 isolation: isolate 属性，强制创建独立合成层，避免与混合模式元素的渲染层干扰。
• 缩小 mix-blend-mode 的作用范围，仅在必要的 DOM 子树中使用，减少对全局渲染上下文的影响。
• 给带 mix-blend-mode 的元素添加 will-change: transform，强制浏览器为其单独创建合成层，隔离与 backdrop 模糊元素的渲染冲突。

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