Safari浏览器中无限循环translateX动画每次循环闪烁如何解决？

问题原因 #

这是Safari浏览器合成层渲染的已知bug，当transform位移动画的循环终点刚好等于背景重复单元的宽度时，动画重置瞬间会出现渲染断层，导致闪烁。

可行解决方案 #

方案1：微调动画位移值，避开渲染判定阈值

因为你的背景是repeat-x横向重复的，只需要将动画终点的位移值多偏移1像素，视觉上不会产生任何差异，即可避开Safari的渲染bug，同时配合强制触发3D合成层的属性优化渲染：

.wave {
  position: absolute;
  height: 90vh;
  width: calc(1920px * 2);
  background-image: url(...);
  background-size: 1920px 100%;
  background-repeat: repeat-x;
  /* 强制触发3D合成层，优化Safari渲染 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: wave 3s linear infinite;
}
@keyframes wave {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  100% {
    /* 多移1px，避开循环重置的渲染断层 */
    transform: translateX(-1921px);
    -webkit-transform: translateX(-1921px);
  }
}
/* 兼容低版本Safari的@keyframes前缀 */
@-webkit-keyframes wave {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-1921px);
  }
}

方案2：同步调整动画时长保证速度一致

如果担心1px的位移偏差影响动效精度，可以将动画时长同步调整为 calc(3s * 1921 / 1920) 约3.0015s，保证移动速度和原逻辑完全一致，视觉上无任何感知差异。

方案3：双元素错位循环（复杂场景适用）

如果是多波浪叠加的复杂动效，可以准备两个完全相同的wave元素，第一个元素动画从0到-1920px，第二个元素初始位移1920px，动画也从0到-1920px，两个动画同时播放，永远不会出现空白断层，也能完全解决闪烁问题。

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