safari 下 position: sticky 失效主因是祖先元素 overflow 静默禁用、-webkit-sticky 顺序错误、flex/grid 父容器高度约束不当及滚动边界判定敏感，需逐项排查并针对性修复。
绝大多数 Safari 下 position: sticky 不起作用，不是代码写错了，也不是浏览器 bug，而是被某层祖先的 overflow 静默禁用——DevTools 里 position 计算值直接变成 static，连 warning 都不报。
检查祖先元素 overflow 是否静默禁用 sticky
只要任意祖先（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身不滚动（比如高度固定、内容未溢出），Safari 就会把 sticky 元素降级为 static。
- 重点盯防：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Vant 的.van-card、Swiper 的壳容器——它们常默认注入overflow: hidden，但不在你写的 CSS 里 - 快速验证：在 Safari DevTools 的 Elements 面板中，从 sticky 元素开始逐级点开
parentElement，在「Computed」里查overflow-x和overflow-y；临时删掉可疑节点的overflow声明，看是否立刻恢复 - 不能删
overflow: hidden？用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新 BFC，也不干扰 sticky 的包含块计算
确保 -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；@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会随地址栏显隐抖动，导致 sticky 频繁重置 - 避免
inline-flex或inline-grid父容器，它们不创建 BFC，sticky 直接失效
滚动到底部 sticky 突然消失不是 bug
sticky 只在“滚动范围内”生效。当内容太短，或 sticky 元素自身高度 + 距离底部距离小于 top 值时，它会在到达边界时停止，看起来像“卡住”或“消失”。这在 iOS 上尤其明显，因为橡皮筋滚动会让元素短暂超出正常滚动范围，触发边界截断。
真正容易被忽略的是：这个行为依赖于滚动容器的精确高度和内容布局，而 Safari 对 flex: 1、min-height: 100vh、甚至 transform 引入的新层叠上下文都极其敏感——稍有偏差，sticky 就可能在边界处提前退出或根本无法触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
