safari 中 sticky 失效主因是祖先元素设置 overflow: hidden/auto/scroll 且不滚动，导致降级为 static；需检查隐藏的 overflow 声明，用 clip-path: inset(0) 替代，旧版 ios 需 -webkit-sticky 优先，并确保容器可滚动。
祖先元素 overflow 静默禁用 sticky
只要 sticky 元素任意一层祖先（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身不滚动（如高度固定、内容未溢出），Safari 就会直接把 sticky 元素降级为 position: static——DevTools 的「Computed」面板里 position 值就是 static，不是“没生效”，是压根没启动。
常见藏雷位置：.ant-modal-body、.van-card、微信小程序的 scroll-view、Swiper 外层 wrapper，它们常默认注入 overflow: hidden，但你根本没在自己的 CSS 里写。
- 快速验证：在 Safari DevTools 中选中 sticky 元素，逐级点开
parentElement，在「Computed」里查每层的overflow-x和overflow-y；临时删掉可疑节点的overflow声明，看是否立刻恢复 - 不能删
overflow: hidden？用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新 BFC，也不干扰 sticky 的包含块计算 - 别写成
clip-path: inset(0px)（带单位），部分旧版 Safari 解析不稳定
iOS Safari 15.4 及更早版本不识别 position: sticky
iOS Safari 15.4 及更早版本完全不认 position: sticky，只认 position: -webkit-sticky，而且顺序写错整条规则会被跳过——不是“不生效”，是浏览器压根没解析成功。
必须写成：position: -webkit-sticky; 在前，position: sticky; 在后。写反了、或写成 -webkit-position: sticky（属性名不存在），都会让旧版 Safari 忽略整行。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- PostCSS 用户：确认
autoprefixer配置目标包含ios_saf ，否则不会插前缀 - DevTools 里
position显示为static？说明-webkit-sticky没起作用，不是样式覆盖，是解析失败 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
flex/grid 父容器导致 sticky 判定失准
当 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 频繁重置 - 绝对别用
display: inline-flex或display: inline-grid，它们不创建 BFC，sticky 直接失效
局部滚动容器里 sticky 锚点错乱
iOS Safari 要求 sticky 必须锚定在“真正可滚动”的容器上。很多局部滚动容器（如弹窗内 div、卡片内部列表）只是声明了 overflow: auto，但内容没撑高、实际不可滚动，浏览器就把它当普通块处理，sticky 退化为 static。
- 检查该容器是否真有滚动空间：内容高度 > 容器高度，否则即使写了
overflow: auto，Safari 也认为它不可滚动 - 若必须保留
overflow: auto，给 sticky 元素加一层 wrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div> - 慎用
transform、filter、will-change——它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是预期滚动容器
最麻烦的从来不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
