CSS animation在iOS设备渲染不一致问题求可行解决方案

可行解决方案 #

方案1：替换重排触发逻辑（无侵入，仅改一行JS）

iOS WebKit 存在渲染队列优化漏洞，快速切换类时仅读取 offsetWidth 不足以让浏览器正确识别前后样式变更，会将两次类操作的样式合并计算，导致动画被跳过。将原来的重排触发代码替换为强制读取计算后样式即可解决：

div.classList.remove('fade-out');
// 替换原来的div.offsetWidth，强制浏览器同步计算最新样式状态
window.getComputedStyle(div).opacity;
div.classList.add('fade-out');

无需修改现有CSS，即可在全平台正常触发动画，也不会出现闪烁问题。

方案2：双状态类切换（适配频繁打断动画的场景）

如果动画需要频繁在上一轮未结束时重新触发，可以新增一个重置状态类，保证每次动画触发前的初始状态完全正确：
新增CSS：

.fade-reset {
  animation: none !important;
  opacity: 1 !important;
}

修改JS逻辑：

div.classList.remove('fade-out');
div.classList.add('fade-reset');
// 强制同步样式计算，避免合并优化
window.getComputedStyle(div).opacity;
div.classList.remove('fade-reset');
div.classList.add('fade-out');

方案3：改用Web Animation API（最稳定，无类切换兼容问题）

如果你的项目兼容iOS 13及以上版本，直接用原生Web Animation API替代CSS类切换，完全规避WebKit的类切换动画触发漏洞，还能直接控制动画打断、重播逻辑：

// 每次需要触发淡出时直接调用即可，自动覆盖上一轮未结束的动画
div.animate(
  [
    { opacity: 1 },
    { opacity: 0 }
  ],
  {
    duration: 2500,
    easing: 'ease-out',
    fill: 'forwards'
  }
);

这个方案不需要额外定义CSS @keyframes 和相关类，触发逻辑更简洁，全平台一致性最好。

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