safari ≤15.3 完全忽略 scroll-behavior: smooth css 属性，webkit 直接丢弃该声明；15.4–16.x 仅支持 js 的 scrollintoview({ behavior: 'smooth' })，css 仍无效；polyfill 在 safari 中易卡顿、错位；唯一可靠方案是运行时检测 + scrollintoview 手动调用。

scroll-behavior: smooth 在 Safari ≤15.3 中被完全忽略

不是写法错，是 Safari 根本不解析该 CSS 属性。iOS 15.3 及更早、macOS Monterey 12.2 及更早的 WebKit 版本中，scroll-behavior 声明会被浏览器引擎直接丢弃，连 fallback 行为都不会触发——表现就是锚点跳转“啪”一下瞬移，且控制台零报错、零警告。

即使升级到 Safari 15.4–16.x，CSS 声明仍静默失效

这个阶段 WebKit 开始识别 scroll-behavior: smooth，但仅对 scrollIntoView({ behavior: 'smooth' }) 生效；而写在 html 或容器上的 CSS 规则依然被忽略。常见误判是：“我看到滚动动了，说明生效了”，其实那很可能是 JS 框架或用户脚本在干预。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• html { scroll-behavior: smooth; } 在 Safari 16.x 中不触发任何动画
• 对 overflow: auto 的 div 设置 scroll-behavior: smooth，Safari 直接当没写
• 若页面有 height: 100vh; overflow: hidden 等布局干扰，根滚动容器实际不可滚动，该属性自然无从作用

为什么 polyfill 在 Safari 里反而更卡

像 smooth-scroll-polyfill 这类库依赖 MutationObserver 和定时重试机制，在 Safari 中因 layout timing 不一致，常导致插值目标跳变、滚动偏移错乱，甚至多个动画帧叠加引发 CPU 尖峰。

• 它不校验元素是否真实可滚动（比如父级 display: none 或 overflow: hidden）
• 没有 cancel 逻辑，用户快速连点锚点时，队列堆积，滚动延迟明显
• 在 iOS Safari 中，MutationObserver 触发时机滞后于视觉更新，造成“滚动已结束但动画还在跑”的错觉

真正能落地的替代方案只有 scrollIntoView + 运行时检测

现代 Safari（iOS 15.4+ / macOS 12.3+）已完整支持 Element.scrollIntoView({ behavior: 'smooth' })，行为稳定、可预测，且能精确控制滚动容器和对齐方式。

• 必须手动绑定点击事件，e.preventDefault() 阻止默认跳转
• 目标元素需存在且已渲染：document.getElementById('id') 比 querySelector 更可靠
• 对内部滚动容器（如 .list { overflow-y: auto; }），显式传 { block: 'start', root: listEl }
• 首次加载或 hashchange 时需主动检查 window.location.hash 并调用，不能只靠点击事件

真正容易被忽略的是：Safari 对「滚动是否发生」的判定比其他浏览器更严格——哪怕目标元素顶部只露出 1px，scrollIntoView 就会直接退出，不会平滑滚动。需要手动判断可见性再决定是否调用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！