safari 中 sticky 失效主因是祖先元素 overflow 静默禁用或旧版缺失 -webkit-sticky 声明：任意层祖先设 overflow: hidden/auto/scroll 且不滚动时，sticky 被降级为 static；ios safari 15.4 及更早需 -webkit-sticky 在前、sticky 在后。
祖先元素 overflow 静默禁用 sticky
只要 sticky 元素任意一层祖先（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身不滚动（比如高度固定、内容未溢出），Safari 就会把它当作“粘性边界”，直接将 sticky 元素降级为 position: static——DevTools 里看到的 position 计算值就是 static，不是没生效，是被截断了。
常见藏雷位置：.ant-modal-body、.van-card、微信小程序的 scroll-view、Swiper 的壳容器——它们常默认注入 overflow: hidden，但不在你写的 CSS 里。
- 快速验证：在 Safari DevTools 的 Elements 面板中，从 sticky 元素开始逐级点开
parentElement，在「Computed」里查overflow-x和overflow-y - 不能删
overflow: hidden？用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新 BFC，也不干扰 sticky 的包含块计算 - 若必须保留滚动能力（如横向表格），确保该祖先设了
display: block+overflow-x: auto，否则 Safari 可能跳过它继续往上找
旧版 Safari 缺失 -webkit-sticky 声明或顺序错误
iOS Safari 15.4 及更早版本完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序写错会导致整条规则被浏览器解析器丢弃——不是“不生效”，是压根没读到。
必须写成：position: -webkit-sticky; 在前，position: sticky; 在后。任何其他顺序（比如先写标准声明，或写成 -webkit-position: sticky）都会让旧版 Safari 忽略整行。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- PostCSS 用户：确认
autoprefixer配置目标包含ios_saf ，否则不会插入前缀 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky') - DevTools 里
position显示为static，基本说明前缀没起作用，不是样式覆盖或延迟渲染问题
flex/grid 父容器导致滚动上下文判定失败
当 sticky 元素直接挂在 display: flex 或 display: grid 容器下，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴方向、稳定基线参考和可滚动空间，三者缺一不可。
- 给父容器加
align-items: flex-start（避免stretch或baseline干扰“进入视口”判断） - 显式设
max-height+overflow-y: auto，而不是仅靠min-height: 100vh——iOS Safari 中vh会随地址栏显隐抖动，导致 sticky 频繁重置 - 绝对别用
display: inline-flex或inline-grid，它们不创建 BFC，sticky 直接失效 - 慎用
transform、filter、will-change——它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是预期滚动容器
滚动边界判定敏感导致底部消失
sticky 在滚动到底部时突然消失，不是 bug，是 Safari 的边界行为：它只在“滚动范围内”生效。当 sticky 元素自身高度 + 距离底部距离小于 top 值时，它就会退出粘性状态。
这个问题在 iOS 上尤其明显，因为 WebKit 对滚动边界判定非常严格——哪怕只是差 1px，sticky 就会退回到文档流位置。
- 检查 sticky 元素的
top值是否过大，或其父容器是否因padding-bottom/margin-bottom导致可用滚动空间不足 - 避免用
vh单位计算父容器高度；优先用max-height+ 固定数值（如500px）或calc(100vh - 60px)等更稳定的表达式 - 真正难的不是补前缀或调样式，而是找到那个没写在你代码里、却悄悄加了
overflow: hidden的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
