通过JS触发的CSS动画在Safari浏览器中无法正常运行的问题

嘿，我之前也踩过Safari这个和缓存相关的动画坑，简直让人摸不着头脑！咱们先拆解下问题根源，再一步步解决：

可能的原因 #

Safari的渲染引擎在处理非缓存外部资源时，DOM渲染和资源加载的时序逻辑和Chrome/Firefox有差异：

• 当加载外部服务器数据时，Safari可能优先处理资源加载，跳过了初始opacity状态的识别，导致后续的动画触发无效
• Safari对CSS过渡/动画的触发时机要求更严格，普通的window.onload可能赶不上它的渲染节奏

解决方案 #

1. 精准控制动画触发时机，用requestAnimationFrame确保渲染准备完成

别再单纯依赖window.onload了，结合DOMContentLoaded和requestAnimationFrame，让动画在浏览器下一帧渲染前触发：

document.addEventListener('DOMContentLoaded', () => {
  // 让浏览器先完成当前渲染周期，再触发动画
  requestAnimationFrame(() => {
    document.body.classList.add('fade-in');
  });
});

对应的CSS要加上webkit前缀（Safari老版本需要）：

body {
  opacity: 0;
  /* 兼容Safari的过渡属性 */
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
}

body.fade-in {
  opacity: 1;
}

2. 强制触发重排，唤醒Safari的渲染机制

有时候Safari会因为优化跳过初始状态的变化，这时候我们可以在添加动画类之前，强制触发一次页面重排：

requestAnimationFrame(() => {
  // 读取offsetHeight会触发浏览器重排
  void document.body.offsetHeight;
  document.body.classList.add('fade-in');
});

3. 改用@keyframes动画替代transition

相比transition，Safari对@keyframes动画的兼容性和稳定性更好，尤其是在非缓存场景下：

/* 兼容Safari的关键帧动画 */
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  opacity: 0;
}

body.fade-in {
  -webkit-animation: fadeIn 0.5s ease-in-out forwards;
  animation: fadeIn 0.5s ease-in-out forwards;
}

4. 确保初始opacity写在CSS中，而非JS动态设置

不要在JS里先设置opacity:0，直接在CSS里定义初始状态——Safari在加载外部资源时，JS动态设置初始值的时机可能太晚，导致动画无法触发。

总结 #

Safari对动画触发的时机和初始状态的识别比其他浏览器更“挑剔”，尤其是非缓存资源加载场景下，核心思路就是：

• 让动画触发时机贴合Safari的渲染周期
• 加上webkit前缀兼容老版本
• 必要时强制触发重排唤醒渲染

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