CSS动画残留像素碎片问题：如何清除Chrome中的遗留像素？

看起来你碰到了Chrome早期版本里硬件加速动画常见的渲染残留bug，尤其是在同时结合位置移动、尺寸变化和盒阴影的动画场景下。下面是几个经过验证的修复方案，你可以逐个尝试：

1. 强制开启GPU加速并声明will-change #

给动画元素明确告知浏览器它即将发生的属性变化，让浏览器提前做好渲染优化，避免残留：

#box {
  position: relative;
  width: 150px;
  height: 150px;
  will-change: transform, box-shadow, width, height; /* 列出所有参与动画的属性 */
  transform: translateZ(0); /* 强制触发GPU加速 */
  animation: move 2s infinite;
}

2. 给父容器添加overflow: hidden #

如果残留碎片出现在元素的移动路径上，给父容器#container添加溢出隐藏，可以截断浏览器误渲染的多余内容：

#container {
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden; /* 添加这一行 */
}

3. 调整backface-visibility属性 #

这个属性可以控制元素背面的可见性，有时候能修复GPU渲染时的残留问题：

#box {
  /* 保留原有属性 */
  backface-visibility: hidden;
}

4. 更换更稳定的盒模型 #

你全局设置了box-sizing: content-box，动画中的尺寸变化可能会和这种盒模型的计算逻辑产生冲突，建议换成现代网页更常用的border-box：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 修改此处 */
}

5. 触发强制重绘（针对非无限循环动画） #

如果你的动画不是无限循环，可以在动画结束时通过JS触发元素重绘，清除残留：

document.getElementById('box').addEventListener('animationend', function() {
  this.style.transform = 'none';
  this.offsetHeight; /* 触发浏览器重绘 */
  this.style.transform = '';
});

这些方法在Chrome 66及类似版本的渲染bug中都有不错的修复效果，你可以单独使用或者组合尝试。

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