Safari 中 scroll-snap-align: center 偏移因基准绑定 content box，受 margin、padding、box-sizing 及 100vh 抖动影响；需用 100dvh、禁用 margin、确保子元素为直接子项、避免 transform 父容器。
scroll-snap-align: center 在 Safari 中为什么总偏一点
因为 Safari（尤其是 iOS）把 scroll-snap-align: center 的计算基准绑定在元素的 content box 上，而这个 box 会受 margin、padding、box-sizing、甚至地址栏收缩导致的 100vh 高度跳变影响。它不是“视觉居中”，而是用 content box 的中心点去对齐容器的 snap line——只要盒模型不干净，就必然偏移。
-
min-height: 100dvh比height: 100vh更稳，能避开 Safari 地址栏收放时的高度抖动 - 子元素必须是滚动容器的**直接子元素**；如果套了
.slide > .inner，scroll-snap-align写在.inner上完全无效 - 禁用所有 margin：Safari 会把
margin-top或margin-left算进吸附基准，哪怕只是1px - 避免
transform父容器：含scale、translate的祖先元素会让 WebKit 跳过 snap 边界计算
mandatory 在 Safari 里为什么松手后还停不准
iOS Safari 的 scroll-snap-type: y mandatory 并非真正强制——它是“尽力而为”。快速滑动后松手，WebKit 会优先保滚动惯性帧率，而非精确停靠，尤其当子元素高度不一致、或父容器用了 position: sticky 时，更容易卡在两屏之间。
- 所有直接子元素必须高度完全一致：
min-height: 100dvh+box-sizing: border-box是底线 - 别信
scroll-snap-stop: always：这属性仅 Chrome 支持，Safari 完全忽略，写了也没用 - 真机测试比 DevTools 更可靠：用 Safari Web Inspector 的 Timeline 查看是否触发
ScrollEnd，而不是只看视觉停靠 - 必要时补 JS：监听
scrollend（注意旧版 Safari 不支持），用scrollIntoView({ block: 'start', behavior: 'smooth' })微调，别手动算scrollTop
为什么设置了 scroll-snap-type 却没反应
最常见原因是滚动上下文根本没激活。Safari 对 scroll-snap 的启用条件比 Chrome 更苛刻：它要求容器不仅要有 overflow-y: scroll，还得有明确尺寸、内容真实溢出、且不能被祖先的 overflow: hidden 截断。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 检查 computed styles：如果
scroll-snap-type显示声明存在但 computed 为空，基本就是写错位置——它必须写在**可滚动容器上**，不是子项 - 移动端必须加
touch-action: pan-y（纵向）或touch-action: pan-x（横向），否则 Safari 默认拦截 touch 事件，绕过原生 snap 逻辑 - 删掉
-webkit-overflow-scrolling: touch：现代 iOS 已废弃该属性，留着反而可能冲突 - Vue/React 组件嵌套时，逐层检查中间 wrapper 是否意外加了
overflow: hidden或contain: layout
横向轮播在 Safari 里滑过两页或回弹
根源是子项宽度不稳定。Safari 对 scroll-snap-align: start 的吸附距离计算依赖“子项宽度 × 数量”，一旦某个子项被 flex 压缩、或因滚动条占位导致 100vw 实际变窄，总可滚动距离就跟视口单位对不上，松手后就会漂移。
立即学习“前端免费学习笔记（深入）”；
- 子项必须设
flex: 0 0 100%+flex-shrink: 0，比width: 100vw抗干扰 - 容器用
width: 100%而非100vw，避开 iOS 滚动条临时占位导致的 1px 偏移 - 禁止用 margin 分隔子项：改用
gap（需确认父容器是display: flex），否则 Safari 会把 margin 纳入吸附距离计算 - 外层有吸顶导航栏时，确保它不遮挡滚动容器的 touch 区域——
z-index和pointer-events都得查
