❌

阅读视图

发现新文章，点击刷新页面。

backdrop-filter 在 Chromium 下的闪烁问题：一次排查记录

✇掘金 前端
向明月

问题背景

我在开发一个 AI 对话组件 RobotPrinter 的过程中，为它做了一个毛玻璃（frosted glass）模式。核心实现很简单，就是 backdrop-filter:

.backdrop-blur {
  backdrop-filter: blur(20px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.02);
}

效果本身没什么问题，但在做录屏演示的时候发现了一个诡异的现象——录出来的视频里，整个组件会间歇性地消失几帧。

这里要强调一点：这个闪烁用肉眼是完全看不出来的。 日常使用中你感觉不到任何异常，体验是流畅的。但只要一录屏，问题就暴露了。组件会在视频中突然消失一两帧，然后又回来。如果你想拿这个效果做产品演示、录制教程、或者在社交媒体上分享，画面就显得很不专业。

这个问题在流式输出（streaming）时尤其明显，因为内容区域每 50ms 更新一次文本，高度在持续变化。

Chrome 上的闪烁现象：

chrome.gif

Firefox 上的正常表现：

foxmail.gif

在线 Demo: ai-island.boat2moon.com/

排查过程

第一阶段：从 CSS 入手

第一直觉是自己的 CSS 写法有问题。我之前整理过一份 backdrop-filter 的踩坑文档，里面明确写过：外层容器不能用 transform，否则会创建新的层叠上下文，干扰 backdrop-filter 的采样。

检查代码，果然在 .robot-printer 上发现了一个 transform: translateZ(0)。删掉之后测试，还是闪。

接着又排查了几个方向：

  • 机器人头部有个 translateZ(20px) 的 3D 效果，在 glass mode 下禁用了——还是闪
  • 给 blur 层加了 transform: translateZ(0) 强制独立合成层——还是闪
  • 去掉了 border-radius——还是闪
  • 去掉了 box-shadow——还是闪
  • 去掉了 resultPanelFadeIn 动画里的 translateY——还是闪

到这一步，基本排除了 CSS 属性冲突的可能。

第二阶段：怀疑 React 渲染

流式输出时，App.tsx 每 50ms 调用一次 setResult，传给 RobotPrinter 的 resultPanel prop 每次都是一个新的对象引用。这会导致依赖了 resultPanel 的 useEffect 在每次渲染时都重新执行，不断地 disconnect 和 reconnect ResizeObserver。

把依赖从 resultPanel 对象换成 resultPanel?.visible 布尔值之后，effect 不再高频重跑了。但闪烁问题没有改善。

另外还发现 ResultPanel 组件里有个 useEffect 依赖了 content，每次内容变化都会调 getBoundingClientRect() 做一次强制同步布局。改成用 ResizeObserver 监听尺寸变化来触发位置更新，避免了 layout thrashing。但闪烁依然存在。

第三阶段：换浏览器

到这里，我已经尝试了十来种方案，全部失败。抱着试试看的心态，把页面拖到 Firefox 里打开。

不闪了。

又在 iPad 的 Safari 上试了一下。

也不闪。

回到 Chrome，闪。Edge 也闪。

浏览器 引擎 是否闪烁
Chrome Blink (Chromium) 闪
Edge Blink (Chromium) 闪
Firefox Gecko 不闪
Safari WebKit 不闪

对比效果请查看上面的录屏 GIF。

结论很清楚了：这是 Chromium 渲染引擎的问题。

进一步分析

为了搞清楚 Chromium 到底哪里出了问题，我又做了几组对照实验。

实验 1：完全禁用 backdrop-filter

注释掉所有 backdrop-filter 属性后，Glass Mode 下的闪烁从"整个组件消失"降级为"右下角一小块偶尔消失几帧"——和 Default Mode 下的表现一致了。

说明 backdrop-filter 本身不是根因，但它会极大地放大问题。没有 backdrop-filter 时只是小范围偶现，加上之后就变成整个组件频繁消失。

实验 2：降低更新频率

把流式输出间隔从 50ms 改到 200ms，闪烁频率有所降低但没有消除。

实验 3：CSS containment

加了 contain: layout paint style 试图隔离 ResultPanel 的渲染影响，无效。

综合来看，问题大概率出在 Chromium 合成器（compositor）的层管理上。当子元素内容高频更新导致高度变化时，合成器可能会在重新计算 backdrop-filter 采样区域的过程中，临时丢弃整个合成层，造成几帧的空白。Firefox 和 WebKit 的合成器在这种场景下处理得更稳定。

提交 Bug Report

既然确认是浏览器的问题，就没什么好纠结的了。我在 Chromium Issue Tracker 上提交了一份 Bug Report：

crbug.com/483220231

附带了：

  • 可在线访问的 Demo
  • 完整的开源仓库
  • Chrome 闪烁和 Firefox 正常的对比录屏

等 Chromium 团队什么时候修了吧。

几点体会

1. 肉眼看不到 ≠ 不存在

这个 Bug 最阴险的地方在于，日常使用时你完全感知不到问题。只有在录屏的时候才会暴露。如果你的项目涉及到产品演示、视频教程录制、或者任何需要屏幕录制的场景，这就会成为一个实实在在的问题。

2. 多浏览器测试不能省

如果我一开始就打开 Firefox 对比测试，大概能省掉几个小时的排查时间。虽然 Chrome 的市场份额最大，但"在 Chrome 上有问题"不等于"是你的代码有问题"。

3. backdrop-filter 仍然是个高风险属性

从浏览器兼容性的角度看，backdrop-filter 已经被广泛支持了。但从渲染稳定性的角度看，各家引擎的实现质量参差不齐。如果你的场景涉及到高频 DOM 更新 + 动态高度变化，在 Chromium 上使用 backdrop-filter 需要特别小心。

4. 一些可能有用的规避措施

如果你也遇到了类似问题，但又必须在 Chrome 上用 backdrop-filter，可以考虑：

  • 降低更新频率（200ms+ 可能会好一些）
  • 降低 blur 值（20px → 10px，GPU 压力小一些）
  • 用静态模糊背景图代替实时 backdrop-filter
  • 为不同浏览器提供差异化的视觉方案

相关链接

❌