Chrome中使用filter模糊的CSS动画收尾阶段出现文本闪烁跳动问题

异常产生原因 #

该问题是Chrome浏览器合成器线程对CSS滤镜的渲染逻辑触发的边界bug，核心触发逻辑如下：

• Chrome在处理filter: blur()从高值向低值衰减的动画过程中，当blur值降到0.5px以下的阈值区间时，会默认判定滤镜效果已经没有视觉感知价值，直接把元素从「合成层离屏滤镜渲染模式」切回「普通DOM文本光栅化模式」
• 切模式的瞬间，Chrome不会复用前序动画帧的光栅化缓存，会重新对文本做一次原生栅格化计算，这一过程和同步执行的transform位移、opacity透明度的动画收尾帧存在渲染线程帧序不同步、资源抢占的问题，最终表现为文本位置跳动、亮度瞬闪的视觉异常
• 代码中提前在静态类写死的will-change: filter, transform, opacity会放大该问题：Chrome会提前将元素提升为独立合成层，进一步缩短滤镜渲染的缓存周期，让渲染模式切换的时机偏移更明显，把原本不可感知的渲染卡顿变成肉眼可见的闪烁。

可落地解决方法 #

• 调整动画收尾的blur阈值，直接规避强制渲染切换
  把keyframes里100%关键帧的filter: blur(0)改成filter: blur(0.01px)，这个数值人眼完全感知不到差异，但可以让Chrome全程保持合成层滤镜渲染模式跑完整个动画周期，不会触发渲染模式的强制切换。修改后的关键帧代码为：

  @keyframes fadeLeftBlurAnimation {
      0%{
          opacity: 0;
          transform: translateX(-10%);
          filter: blur(16px);
      }
      100%{
          opacity: 1;
          transform: translateX(0);
          filter: blur(0.01px);
      }
  }
  

• 动画结束后主动回收渲染资源
  给动画补充animation-fill-mode: forwards属性，同时监听元素的animationend事件，在回调中将元素的filter属性手动设置为none，把提前申请的will-change值改回auto，彻底将渲染逻辑切回普通模式，既解决闪烁问题，也避免残留的低blur值带来的持续渲染性能开销。示例代码：

  const textEl = document.getElementById('text');
  textEl.addEventListener('animationend', () => {
    textEl.style.filter = 'none';
    textEl.style.willChange = 'auto';
  })
  

• 优化will-change的使用时机
  移除静态类中固定声明的will-change属性，改成在触发动画前才通过JS动态给元素添加对应的will-change值，动画结束后同步移除，避免Chrome提前分配合成层带来的模式切换冲突。

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