Safari中CSS动画丢失中间段问题求助：仅首尾背景正常显示

问题根源 #

Safari对CSS关键帧的状态计算存在累积渲染bug，多次循环后会丢失中间帧的背景色状态，尤其是仅用单一百分比节点定义状态时，浏览器无法稳定识别每个阶段的起止范围。

修复方案 #

1. 优化关键帧的状态范围定义 #

把原来单一百分比的关键帧，改成区间式定义，给每个颜色阶段明确起止范围，避免Safari循环时混淆状态：

/* 同时兼容webkit前缀和标准语法 */
@-webkit-keyframes bgChange {
  0%, 24.9% { background-color: red; }
  25%, 49.9% { background-color: yellow; }
  50%, 74.9% { background-color: pink; }
  75%, 99.9% { background-color: green; }
  100% { background-color: red; }
}
@keyframes bgChange {
  0%, 24.9% { background-color: red; }
  25%, 49.9% { background-color: yellow; }
  50%, 74.9% { background-color: pink; }
  75%, 99.9% { background-color: green; }
  100% { background-color: red; }
}

这种写法让每个颜色阶段都有明确的“持续区间”，而非单一节点，能强制Safari正确识别每个循环的状态过渡。

2. 调整硬件加速规则（按需测试） #

部分Safari版本中，GPU硬件加速会导致动画状态缓存异常，可尝试添加以下CSS强制重绘规则：

.animated-box {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

如果问题反而加重，就去掉上述规则，改用禁用硬件加速：

.animated-box {
  -webkit-transform: none;
  transform: none;
}

3. JS兜底：循环N次后重置动画 #

如果CSS优化无效，可针对Safari做动画重置，清除浏览器的状态缓存：

// 检测Safari浏览器
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  const targetEl = document.querySelector('.animated-box');
  let loopCounter = 0;
  
  // 监听动画循环事件
  targetEl.addEventListener('animationiteration', () => {
    loopCounter++;
    // 每3次循环重置一次动画（可根据实际情况调整次数）
    if (loopCounter % 3 === 0) {
      // 先暂停并清除动画
      targetEl.style.animation = 'none';
      // 强制触发重绘，清除缓存
      void targetEl.offsetWidth;
      // 恢复动画
      targetEl.style.animation = '';
    }
  });
}

4. 极端替代方案：用渐变模拟纯色背景 #

如果背景色过渡始终有问题，可将background-color替换为linear-gradient模拟纯色，Safari对背景图片的过渡渲染更稳定：

@-webkit-keyframes bgChange {
  0%,24.9% { background-image: linear-gradient(red, red); }
  25%,49.9% { background-image: linear-gradient(yellow, yellow); }
  50%,74.9% { background-image: linear-gradient(pink, pink); }
  75%,99.9% { background-image: linear-gradient(green, green); }
  100% { background-image: linear-gradient(red, red); }
}

测试建议 #

优先测试关键帧优化方案，这是最轻量化的修复；如果问题依旧，再尝试硬件加速调整或JS重置。

内容的提问来源于stack exchange，提问作者asking for a friend