Safari浏览器线性循环动画出现白色间隙问题求助

针对你遇到的Safari中线性循环动画出现白色间隙的问题，核心原因是动画位移比例与背景图循环逻辑不匹配，加上Safari对CSS渲染的精度处理差异导致的。以下是具体修复方案：

问题诊断 #

1. 你的.animation-waves-item宽度设为400%，但动画关键帧的位移是-4%→-20%→-35%，这个比例无法让背景图无缝衔接，循环到终点时会出现空白；
2. Safari对小数百分比的位移计算存在精度误差，放大了间隙问题；
3. 多余的3D属性（如perspective、transform3d）反而触发了不必要的渲染层，加剧了渲染间隙。

修复步骤 #

• 统一动画位移与元素宽度的比例，让100%关键帧的位移刚好完成一次背景循环；
• 移除不必要的3D相关属性，简化渲染逻辑；
• 给动画元素添加will-change: transform提示Safari优化渲染性能；
• 调整背景图尺寸，确保与容器高度完全匹配，避免拉伸导致的间隙；
• 优化多wave元素的动画延迟，让叠加效果更自然。

修改后的完整代码 #

CSS

.animation-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

.animation-waves {
  height: 14vw;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  animation: fadein 4s;
}

.animation-waves-item {
  width: 200%; /* 设为200%，对应背景图重复一次的宽度 */
  position: absolute;
  height: 100%;
  animation: splash-wave 50s linear infinite;
  opacity: 0.8;
  background-size: 50% 100%; /* 背景图占容器宽度50%，2个刚好填满200%宽度 */
  background-repeat: repeat-x;
  will-change: transform; /* 提示浏览器优化动画渲染 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='800' height='209' xmlns='http://www.w3.org/2000/svg'  version='1.1'%3e%3cg%3e%3ctitle%3eLayer 1%3c/title%3e%3cpath id='svg_1' fill='red' clip-rule='evenodd' fill-rule='evenodd' d='m721.33335,44.87378c0,0 0,0 0,0c-4.88889,-1.61705 -9.77778,-2.82984 -14.66667,-4.44689c0,0 0,0 0,0c0,0 0,0 0,0l0,0c-12.66667,-3.63836 -25.33333,-7.68099 -38.22222,-10.91509c0,0 0,0 0,0c-125.55556,-34.36232 -255.55556,-48.91578 -444.00001,13.74493c0,0 -9.33333,2.42558 -24.44445,6.06394c-92.88889,19.40461 -153.11112,18.19182 -181.33334,15.76624c-6.44444,-0.80853 -12.66667,-1.61705 -18.66667,-2.42558l0,145.93881l800.00002,0l0,-138.66208l0,-7.68099c-33.77778,-5.25541 -62.44445,-12.53214 -78.66667,-17.38329z' class='st0'/%3e%3c/g%3e%3c/svg%3e")
}

/* 调整关键帧，位移比例对应元素宽度，实现无缝循环 */
@keyframes splash-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 位移-50%，刚好让200%宽度的元素向左移动一半，背景无缝衔接 */
  }
}

/* 补全原代码缺失的fadein动画 */
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

HTML

<div class="container">
  <div class="animation-wrapper">
    <div class="animation-waves">
      <div class="animation-waves-item"></div>
      <div class="animation-waves-item" style="animation-delay: -25s;"></div> <!-- 添加延迟让两个wave错开，增强动画层次感 -->
    </div>
  </div>
</div>

额外注意事项 #

• 尽量使用整数比例的位移和元素宽度，避免Safari的小数像素精度问题；
• 2D动画场景下无需添加3D相关属性（如perspective、transform3d），否则可能触发不必要的渲染层，导致间隙或性能问题；
• 如果需要更多wave叠加，确保每个元素的动画延迟为总时长的1/n（n为wave数量），避免同步运动导致的视觉间隙。

内容的提问来源于stack exchange，提问作者bartosz.baczek