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

Safari在低电量模式下动画卡顿是因系统强制启用prefers-reduced-motion: reduce，WebKit直接跳过所有CSS动画渲染；需用DevTools模拟验证，并在媒体查询中显式设animation/transition为none、补终态样式、移除will-change，同时监听change事件动态切换class。

当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