Safari中sticky失效主因是祖先overflow静默禁用：任意overflow:hidden/auto/scroll且自身不滚动时，浏览器将sticky元素降级为static；需逐级检查Computed overflow值，用clip-path:inset(0)替代或前置声明-webkit-sticky。
祖先元素 overflow 静默禁用 sticky
Safari 会把任意设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先节点当作“粘性边界”，只要该容器自身不滚动（比如高度固定、内容未溢出），就会直接将 position: sticky 元素降级为 position: static——DevTools 里看到的 computed position 就是 static，不是没生效，是被截断了。
常见藏雷位置包括：.ant-modal-body、.van-card、scroll-view（微信小程序）、Tab 标签页根节点、轮播图父级。它们常默认加 overflow: hidden 防穿出或裁圆角，却顺手废掉了子级 sticky。
- 快速验证：在 DevTools 中选中 sticky 元素，逐级向上点开父节点，在「Computed」里查
overflow-x和overflow-y，临时删掉可疑声明看是否恢复 - 不能删
overflow？用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新滚动上下文，也不干扰 sticky 的包含块计算 - 别写成
clip-path: inset(0px)（带单位），部分旧版 Safari 解析不稳定；clip-path: inset(0)在 iOS Safari 13.4+ 已全面支持，2026 年无兼容顾虑
旧版 Safari 必须前置声明 -webkit-sticky
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky。而且 CSS 解析器遇到非法值会跳过整行声明——如果 position: sticky 写在前面，后面再跟 position: -webkit-sticky，旧版 Safari 可能直接忽略整个 position 声明。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 不要写成
-webkit-position: sticky（属性名不存在） - PostCSS autoprefixer 必须配置目标包含
ios_saf，否则不会插前缀 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
flex/grid 父容器导致粘性判定失败
当 sticky 元素直接挂在 display: flex 或 display: grid 容器下，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴滚动空间 + 稳定基线参考，否则容易失效。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 给 flex/grid 父容器加
align-items: flex-start（避免stretch或baseline干扰“进入视口”的判断） - 显式设
max-height+overflow-y: auto，而不是仅靠min-height: 100vh——iOS Safari 中vh会随地址栏动态变化 - 若父容器必须滚动（如横向表格），确保它设了
display: block+overflow-x: auto，否则 Safari 可能跳过它继续往上找
transform 或层叠上下文意外拦截
如果 sticky 元素的某个祖先设置了 transform、perspective 或 filter，会创建新的层叠上下文并“禁用” sticky 行为——这在 Chrome 和 Firefox 中也存在，但 Safari 更敏感，尤其 iOS 15.x 前几乎必然失效。
- 特别注意导航栏直系父容器：不能被
transform隔离，必须是正常流中可滚动的容器 - 避免对
body或html设置height: 100%或overflow: hidden，这会让 iOS 认为视口不可滚动，进而破坏锚点 - 慎用
will-change: transform来“修复”粘性——反而可能让 Safari 更懵
真正难的不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。这类问题往往在 DevTools 里看不出样式来源，得靠逐层 computed overflow 手动排查。
