Safari中仅元素高度较大时CSS动画重复播放出现白闪

问题场景 #

实现跑马灯式无限滚动背景时，Safari浏览器仅在元素高度较大（比如10000px）时，动画重复播放会出现白闪；缩小元素高度或更换其他浏览器，白闪现象消失。实际使用的是215×80的渐变图，作为全屏拉伸背景。

原代码示例：

.image-bg {
  height: 10000px;
  animation: bg-slide 2s linear infinite;
  background-image: url(https://picsum.photos/215/80);
  background-position: center;
  background-repeat: repeat;
  background-size: 50%;
  width: 300%;
}

@keyframes bg-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }  
}

<div class="image-bg"></div>

解决方法 #

方法1：改用background-position实现动画 #

替换原transform动画为背景定位动画，Safari对背景属性的渲染优化更稳定，避免大元素transform动画的衔接断层：

.image-bg {
  height: 10000px;
  animation: bg-slide 2s linear infinite;
  background-image: url(https://picsum.photos/215/80);
  background-position: 0 center; /* 初始定位调整为左侧 */
  background-repeat: repeat;
  background-size: 50%;
  width: 300%;
}

@keyframes bg-slide {
  from { background-position: 0 center; }
  to { background-position: -50% center; }  
}

方法2：添加渲染优化提示 #

给元素添加will-change属性，提示浏览器提前为动画分配渲染资源，减少白闪概率：

.image-bg {
  /* 原有样式保留 */
  will-change: background-position; /* 对应使用的动画属性 */
}

方法3：拆分大高度元素 #

将超大高度的单个元素拆分为多个小高度子元素，每个子元素应用相同的背景动画，降低单个元素的渲染压力：

<div class="bg-container">
  <div class="image-bg"></div>
  <div class="image-bg"></div>
  <!-- 按需添加更多子元素，总高度凑到需求值 -->
</div>

.bg-container {
  height: 10000px;
}
.image-bg {
  height: 1000px; /* 每个子元素高度减小 */
  /* 其余背景、动画样式保持不变 */
}

原理说明 #

Safari在处理超大尺寸元素的transform动画时，可能因渲染缓存刷新、重绘衔接的问题，导致动画循环时出现短暂空白。改用背景定位动画、添加渲染提示或拆分元素，都能从不同角度降低浏览器的渲染负担，解决白闪问题。

内容的提问来源于stack exchange，提问作者nth-chile