如何解决safari浏览器在低电量模式下网页动画渲染不流畅的问题？

Safari在低电量模式下，网页动画突然卡顿、加载指示器停止旋转、折叠菜单失去过渡效果——这可不是你代码写错了，而是iOS/iPadOS系统强制开启了prefers-reduced-motion: reduce，导致WebKit直接跳过所有CSS动画渲染流程。问题的根源很明确，只是很多人第一次遇到时容易绕弯路。

确认是否为低电量模式引发

别凭感觉猜，用Safari DevTools快速验证一下：按Command+Shift+P（Mac）或Ctrl+Shift+P（Windows/Linux），输入“reduced”，选择「Emulate CSS prefers-reduced-motion」→ 切换为 reduce → 刷新页面。如果动画立刻消失，而且window.matchMedia('(prefers-reduced-motion: reduce)').matches返回true，那问题就锁定了。

【注意：此模拟必须在当前页面开启，不能在新标签页中操作，否则matchMedia监听失效】

CSS层适配：补终态 + 清过渡 + 移will-change

单靠一个animation: none可解决不了根本问题——transition声明仍然保留在样式计算里，导致transitionend事件永远不会触发，后续逻辑全断掉。

方法一：显式重置关键属性

在@media (prefers-reduced-motion: reduce)内部，对所有动效元素写死终态样式，同时清除过渡与硬件加速声明：

/* loading旋转图标 */
.spinner { animation: spin 1.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    transition: none;
    will-change: auto;
    transform: rotate(0deg); /* 补终态，避免卡在中间角度 */
  }
}

方法二：统一接管降级开关

给动态添加一个reduced-motion类，CSS层集中控制所有元素：

html.reduced-motion * {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

JS中监听变化并切换class：

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
function handleReduceChange(e) {
  if (e.matches) document.documentElement.classList.add('reduced-motion');
  else document.documentElement.classList.remove('reduced-motion');
}
motionQuery.addEventListener('change', handleReduceChange);
handleReduceChange(motionQuery); // 初始化

JS动效组件适配：避免初始化后失联

手风琴菜单、模态框等依赖JS控制的组件，不能只在页面加载时判断一次matchMedia结果——用户可能中途开启或关闭低电量模式，如果只监听一次，后续切换就失效了。

第一步：封装降级判断逻辑

function isReducedMotion() {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

第二步：在每次触发动效前实时校验

function openAccordion(item) {
  if (isReducedMotion()) {
    item.classList.add('expanded');
    return;
  }
  item.classList.add('animating');
  item.offsetHeight; // 强制重排
  item.classList.add('expanded');
}

第三步：移除依赖transitionend的回调链

降级状态下，transitionend永远不会触发，所有基于该事件的后续逻辑（如销毁DOM、释放资源）必须改用同步执行或定时器兜底，否则直接卡死。

解除Safari帧率封锁（ProMotion设备专用）

这一步仅适用于iPhone 13 Pro及以上、iPad Pro、MacBook Pro等支持ProMotion屏幕的机型，而且系统需要是iOS/iPadOS/macOS 18.0+。

① 打开【设置】→【Safari 浏览器】→【高级】→【功能旗标】

② 搜索框输入60，定位到「Prefer Page Rendering Updates near 60fps」

③ 【将其开关关闭——此项不解除低电量模式，仅解除WebKit对高刷渲染的保守限制】

④ 双击Home键或从屏幕底边向上滑动并停顿，上滑关闭所有Safari进程

⑤ 重新启动Safari，访问https://testufo.com/Refresh-Rate验证帧率是否达到119–120 fps