safari 中 scroll-behavior: smooth 不生效的真正原因是版本门槛（ios 15.4+/macos safari 16+）及四大隐性限制：viewport 设置冲突、根元素样式干扰、滚动容器非 html 且未单独设置、系统“减少动画”偏好启用；嵌套容器需显式设置 overflow 和 scroll-behavior；scrollintoview({ behavior: 'smooth' }) 在目标部分可见时会立即退出，需先校验元素是否真正不可见。
scroll-behavior: smooth 在 Safari 里不生效的真正原因
不是你写错了，而是 Safari 对 scroll-behavior 的启用有隐性门槛。iOS 15.4+ 和 macOS Safari 16+ 才支持该属性，但即使版本达标，也常因以下任一条件失败：
• 页面设置了 viewport meta 中的 height=device-height 或 user-scalable=no；
• 根元素（html）被其他样式干扰，比如 overflow: hidden、height: 100% 或 transform；
• 实际滚动容器不是 html，而是某个 div，但你只给 html 加了 scroll-behavior: smooth；
• 用户开启了系统级“减少动画”偏好（prefers-reduced-motion: reduce），Safari 会静默禁用平滑行为，不报错也不提示。
滚动容器不是 html？必须单独设置 scroll-behavior
绝大多数 SPA 或复杂布局中，锚点跳转或 scrollIntoView() 滚动的目标是内部容器（如侧边栏、Tab 内容区、弹窗列表），而非整个视口。此时 scroll-behavior 必须作用于该容器本身：
• 给目标容器加 overflow-y: auto（或 scroll）且有明确高度（如 h-96）；
• 同时加 scroll-behavior: smooth —— 不要指望父级或 html 的设置能继承；
• 若用 Tailwind，需手动在 tailwind.config.js 中扩展：scrollBehavior，或直接写内联样式；
• 注意：Safari 对嵌套过深的滚动上下文敏感，中间某层若含 overflow-hidden 或 min-width: 0，会切断滚动链路。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
scrollIntoView({ behavior: 'smooth' }) 在 Safari 中“跳一下就停”
这不是 bug，是 Safari 严格遵循规范的表现：只要目标元素任意像素已出现在视口内（哪怕只有顶部 1px），scrollIntoView() 就会立即退出，不触发滚动。常见于目录锚点点击后位置偏移：
• 解决方法不是强行滚动，而是先判断是否真正“不可见”：!element.getBoundingClientRect().top ；<br>• 避免滥用 <code>block: 'start'，它在 Safari 中易导致定位偏差；
• 若元素处于 display: none 或未挂载的 React/Vue 组件中，调用静默失败，需确保元素已渲染且可见；
• window.scrollTo({ behavior: 'smooth' }) 不受 CSS scroll-behavior 影响，必须显式传参。
性能与降级：别让 smooth 拖垮低端 iOS 设备
开启 scroll-behavior: smooth 后首屏变慢，问题不在 CSS 本身，而在 Safari 对滚动区域持续插值计算带来的合成层压力：
• 尤其当容器同时用了 will-change: scroll-position 或频繁重排子元素时，帧率明显下降；
• 不要全局启用，只在用户明确预期平滑跳转的场景使用（如文档目录、Tab 切换内容区）；
• 旧版 Safari（≤15.4）完全不支持，可用轻量 JS 降级：element.scrollIntoView({ behavior: 'auto' }) + requestAnimationFrame 插值，但仅限必要路径；
• 真正棘手的是：Safari 对 scroll-snap-type 和 overscroll-behavior 的组合支持极差，二者共存时平滑滚动大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
