safari 中 sticky 表头失效主因是祖先元素 overflow 计算值触发粘性边界截断，需逐级排查 overflow 声明并替换为 clip-path: inset(0)，确保滚动容器显式设 max-height、正确 display 与 flex 属性，并前置 -webkit-sticky 兼容旧版。
检查滚动容器祖先的 overflow 计算值
Safari 会把任意设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先节点当作粘性边界，只要该容器自身不滚动（比如内容未溢出、高度固定），就会直接将 position: sticky 表头降级为 static——你在 DevTools 的 Computed 面板里看到的 position 就是 static，不是没生效，是被截断了。
- 重点排查层级较深的“藏雷点”：
.ant-modal-body、.van-card、微信小程序的scroll-view、Swiper 外层 wrapper、Tab 标签页根节点 - 在 Safari DevTools 中选中表头元素 → 点击右侧
parentElement链接逐级向上 → 每跳一层都看Computed → overflow-x和overflow-y - 临时右键删掉某层的
overflow声明，如果表头立刻恢复吸附，问题就锁定在这层
用 clip-path: inset(0) 替代 overflow: hidden
很多 UI 框架或设计规范强制要求 overflow: hidden（比如防弹窗内容穿出、保持圆角裁剪），硬删会破样式。此时不能改结构，得换属性。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 把问题祖先的
overflow: hidden直接替换为clip-path: inset(0)，视觉裁剪效果完全一致 -
clip-path: inset(0)不创建新 BFC，也不干扰 sticky 的包含块计算，Safari 13.4+（即 iOS 13.4+）已全面支持，2026 年无需兼容兜底 - 切勿写成
clip-path: inset(0px)—— 带单位的写法在部分旧版 Safari 中解析不稳定 - 若该祖先同时有
border-radius，保留即可，clip-path不影响圆角渲染
确保滚动容器本身可滚动且声明完整
sticky 表头必须锚定在“真正可滚动”的容器上。仅声明 overflow-y: auto 不够，Safari（尤其 iOS）对局部滚动上下文的判定非常苛刻。
- 滚动容器需显式设
max-height（如max-height: 500px），不能只靠min-height: 100vh—— iOS Safari 中vh会随地址栏显隐抖动，导致 sticky 频繁重置 - 若容器是
display: flex或display: grid，必须加align-items: flex-start（避免stretch或baseline干扰“进入视口”的判断） - flex 容器还需明确主轴方向：
flex-direction: column+overflow-y: auto（不是overflow: auto） - 绝对不要用
display: inline-flex或inline-grid—— 它们不创建 BFC，sticky 直接失效
旧版 iOS Safari 必须前置 -webkit-sticky
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序写错整条规则会被浏览器跳过。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如
position: sticky; position: -webkit-sticky;或-webkit-position: sticky（属性名不存在）都会让旧版 Safari 忽略整行 - PostCSS autoprefixer 用户，请确认配置目标包含
ios_saf ，否则不会插入前缀 - 用
CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')替代@supports (position: sticky)做运行时检测
top，而是找到那个没写在你 CSS 里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能来自组件库源码，也可能来自某行被遗忘的 CSS-in-JS 注入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
