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+。

1. 打开【设置】→【Safari 浏览器】→【高级】→【功能旗标】
2. 搜索框输入 60，定位到 「Prefer Page Rendering Updates near 60fps」
3. 将其开关关闭——此项不解除低电量模式，仅解除WebKit对高刷渲染的保守限制。
4. 双击Home键或从屏幕底边向上滑动并停顿，上滑关闭所有Safari进程
5. 重新启动Safari，访问 https://testufo.com/Refresh-Rate 验证帧率是否达到119–120 fps

《夸克》非常好用的免费AI浏览器

下载APP查看