Safari浏览器低电量模式为何导致网页动画卡顿？

iOS低电量模式会对Safari中的CSS动画产生严重影响。其核心机制是系统级强制开启 prefers-reduced-motion: reduce，导致Safari直接忽略所有CSS动画——@keyframes、transition、甚至 will-change 触发的硬件加速全部失效。这不是Bug，而是iOS/iPadOS的硬性限制，代码层面无法绕过。

动画失效的典型表现

页面滚动变卡顿、加载指示器不旋转、折叠菜单无过渡、按钮点击直接跳转状态——这些症状并非代码错误，而是Safari在底层直接跳过动画渲染所致。

如何确认是低电量模式导致

使用DevTools可快速验证，无需猜测：

• 在Safari中打开网页，按 Command+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）
• 输入“reduced”，选择 Emulate CSS prefers-reduced-motion
• 切换为 reduce 后刷新页面，动画立即消失，即可确定问题根源
• 还可检查 window.matchMedia('(prefers-reduced-motion: reduce)').matches 是否返回 true

为何仅添加 animation: none 不够

许多开发者认为在媒体查询中写上 animation: none 即可解决问题，但实际情况更为复杂：

• transition: all 0.3s 即使不执行动画，仍占据样式计算位置，导致 transitionend 事件永远无法触发
• 必须写成 transition: none，不能留空、注释掉或写成 transition: none 0s
• 对于纯装饰性动画（如loading旋转图标），需补充终态样式：animation: spin 2s infinite 配合 transform: rotate(0)，否则降级后元素可能卡在半空
• will-change: transform 在reduce状态下不仅无效，还可能引发渲染异常，建议直接移除

JS动画逻辑也需适配

若在JS中控制动效组件（如手风琴菜单或模态框），不能仅在初始化时判断一次 matchMedia 结果：

• 用户可能在页面运行中随时切换低电量模式，需监听实时变化
• 推荐写法：motionQuery.addEventListener('change', handler)（Safari 14+）或旧版 addListener
• 更稳妥的方式是给 添加一个 reduced-motion 类，由CSS统一控制开关，JS仅负责切换该类
• 第三方动效库（如Framer Motion）默认不响应此变化，需手动配置 transition={{ duration: 0 }} 或传递 disable: m