safari ≤15.3 完全忽略 scroll-behavior: smooth，ios 15.4–16.x 仅支持 scrollintoview({ behavior: 'smooth' })，macos sonoma 14.0/ios 17 起才原生支持且仅限 html 元素。
它根本没被浏览器解析——不是写法错，是 Safari ≤15.3 直接丢弃整条 CSS 规则。
scroll-behavior: smooth 在 Safari 的真实支持边界
这个属性在 Safari 中长期处于“半残”状态：
- iOS 15.3 及更早版本：CSS 声明被完全忽略，
html { scroll-behavior: smooth; }写了也等于没写，不报错、不警告、不降级 - iOS 15.4–16.x：仅对
scrollIntoView({ behavior: 'smooth' })生效，scroll-behavior: smooth仍静默失效 - macOS Sonoma 14.0 / iOS 17 起：才真正支持
scroll-behavior: smooth，但仅限html元素；对任何div容器（如.sidebar）设置该 CSS，Safari 一律静默丢弃 - 即使系统未开启
prefers-reduced-motion，旧版 Safari 也因缺少滚动插值引擎而 fallback 到instant
@supports (scroll-behavior: smooth) 检测完全不可靠
这个媒体查询只检查浏览器是否「识别」该 CSS 属性，不反映实际动画能力：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 在 iOS 15.3 上，
@supports (scroll-behavior: smooth)返回true，但滚动仍是瞬时的 - 真实检测必须结合 JS 行为：先确认
typeof Element.prototype.scrollIntoView === 'function'，再调用并监听scroll事件是否连续触发 - 开发者工具里看到
scroll-behavior: smooth出现在 computed styles 中，不代表它真正在起作用——旧版 Safari 会显示它，但不执行
为什么给 body 设置 scroll-behavior 没用
90% 的“没反应”源于错误的作用目标：
- 浏览器真正的滚动上下文绑定在
html元素上，不是body；Safari 尤其严格，body { scroll-behavior: smooth; }基本无效 - 若页面用了自定义滚动容器（比如
.content { overflow-y: auto; height: 100vh; }），必须给那个div单独加scroll-behavior: smooth，html上的声明不会穿透生效 - 某些 CSS 重置（如
* { margin: 0; }）或 Normalize.css 会意外重置html的overflow，导致该属性静默失效
smoothscroll-polyfill 在 Safari 里反而更卡
盲目引入全量 polyfill 常引发新问题：
- 它重度依赖
MutationObserver，而 Safari 对其触发时机敏感，DOM 更新与 layout 计算不同步时，反复重算目标位置 - 没有内置用户手动中断逻辑，
cancelAnimationFrame调用滞后，导致“拉扯感”或滚动过冲 - 不对容器可见性校验：若目标元素父级是
display: none或overflow: hidden，仍强行驱动，getBoundingClientRect()返回{ top: 0, left: 0 }，滚动直接错乱 - 默认缓动函数是
ease-in-out，和原生cubic-bezier(0.25, 0.46, 0.45, 0.94)差异明显，开头太慢、结尾易抖
最稳的路径不是补全所有旧版本，而是明确放弃 iOS 15.3 及更早的平滑滚动——它们连基础插值引擎都没有，强行模拟只会失准或卡顿。重点应放在运行时检测 + 精确控制容器 + requestAnimationFrame 增量更新，而不是堆 polyfill。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
