使用clip-path结合自定义CSS动画时出现异常渲染问题

这种渲染瑕疵一般是浏览器在处理clip-path裁剪元素的动画时，边缘渲染优化不足导致的，尤其是配合shake这类transform动画时容易出现。可以试试下面几种解决方法：

• 给.rocket-body-1添加硬件加速属性，强制浏览器用GPU处理渲染，避免边缘闪烁或瑕疵：

.rocket-body-1 {
  /* 保留你原有的属性 */
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  /* 新增以下两行 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

• 如果上面的方法没用，试试给元素加个透明轮廓，填补渲染时的像素间隙：

.rocket-body-1 {
  /* 保留原有属性 */
  outline: 1px solid transparent;
}

• 还可以微调clip-path的坐标值，用带小数的百分比，避免浏览器像素对齐的问题：

.rocket-body-1 {
  clip-path: polygon(0 10.1%, 100% 0.1%, 100% 99.9%, 0 89.9%);
}

这些方法要么通过硬件加速提升渲染效率，要么通过微小样式调整填补渲染间隙，都能有效解决这类clip-path动画的渲染瑕疵。

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