MS Edge 16中CSS Filter导致CSS Animation抖动问题求助

我之前做项目时也踩过Edge 16这个特有坑——给带CSS动画的图标加上filter: drop-shadow(0px 0px 2px red);后，动画开始莫名抖动，但Chrome、Firefox这些浏览器完全正常。后来排查发现，这应该是Edge 16的渲染引擎在处理滤镜与动画结合时，图层合成逻辑存在bug，导致每一帧都重复计算滤镜效果，进而引发抖动。

给你几个亲测有效的解决思路：

• 用box-shadow替代drop-shadow
  如果你的图标是规则矩形（或者不需要跟随图标轮廓的投影），直接换成box-shadow就能解决，它的渲染机制更稳定，不会触发抖动问题：

  .animated-icon {
    box-shadow: 0 0 2px red;
    animation: spin 2s linear infinite;
  }
  

• 给元素开启硬件加速
  强制Edge为元素创建独立的合成图层，减少渲染冲突。可以用transform: translateZ(0)或者will-change属性触发：

  .animated-icon {
    filter: drop-shadow(0px 0px 2px red);
    animation: spin 2s linear infinite;
    /* 触发硬件加速 */
    transform: translateZ(0);
    /* 或者用will-change，注意不要滥用 */
    /* will-change: transform; */
  }
  

  这里提醒下，will-change不要随便给太多元素添加，否则反而会影响性能，只给需要的动画元素加即可。

• 分离动画和滤镜的载体
  把图标和投影拆成两个独立部分，让动画只作用在图标本身，滤镜放在伪元素或子元素上，避免两者的渲染逻辑冲突：

  .icon-wrapper {
    position: relative;
  }
  .icon-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(your-icon.svg) no-repeat center / contain;
    filter: drop-shadow(0px 0px 2px red);
    z-index: -1;
  }
  .animated-icon {
    animation: spin 2s linear infinite;
  }
  

  这个方法兼容性最好，哪怕是不规则形状的图标也能完美适配。

你可以根据自己的图标形状和动画需求选一个合适的方案，我当时用硬件加速的方法就快速解决了问题。

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