使用CSS filter: drop-shadow()时Firefox出现闪烁问题求助

问题原因 #

Firefox在处理动态播放的视频元素与filter: drop-shadow过渡动画时，会因频繁重绘与渲染层冲突导致闪烁，暂停视频时静态内容不会触发该问题。

解决方案1：使用伪元素实现发光效果（推荐） #

避免直接在包含视频的.glow元素上应用filter，改用伪元素承载发光效果，不干扰视频渲染：

.glow {
  position: relative;
  transition: all 0.33s ease-in-out;
}

/* 用伪元素创建独立发光层 */
.glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit; /* 继承父元素圆角，保持形状匹配 */
  filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.25));
  transition: filter 0.33s ease-in-out;
  pointer-events: none; /* 不影响父元素交互 */
  z-index: -1; /* 置于元素下方 */
}

.glow:hover::before {
  filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.75));
}

解决方案2：强制创建独立渲染层 #

给视频元素添加属性提示浏览器提前优化渲染，减少重绘冲突：

.glow video {
  will-change: transform;
  /* 也可使用 transform: translateZ(0); 强制启用GPU加速层 */
  /* transform: translateZ(0); */
}

解决方案3：替换drop-shadow为box-shadow（仅适用于矩形元素） #

如果.glow是规则矩形，用box-shadow替代drop-shadow可避免渲染冲突，性能更优：

.glow {
  box-shadow: 0px 0px 50px rgba(26, 100, 243, 0.25);
  transition: box-shadow 0.33s ease-in-out;
}

.glow:hover {
  box-shadow: 0px 0px 50px rgba(26, 100, 243, 0.75);
}

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