CSS position:sticky在iOS旧版失效的解决方法

先说一个很多前端开发者在实际项目中踩过的坑：iOS Safari 15.4 及更早版本，压根不认识 position: sticky，它只认 position: -webkit-sticky。而且，这个前缀的顺序一旦写错，整条规则就会被直接跳过——不是“不生效”，是浏览器根本没解析。

必须把 -webkit-sticky 写在 sticky 前面

旧版 Safari 的 CSS 解析器有个特性：遇到非法值会直接丢弃整行声明。如果先写 position: sticky，再写 position: -webkit-sticky，它可能连前一条都一起忽略掉。这意味着，正确的写法必须让 -webkit-sticky 在前，sticky 在后。

• ✅ 正确写法：position: -webkit-sticky; 在前，position: sticky; 在后
• ❌ 错误写法：position: sticky; 在前，或使用 -webkit-position: sticky（后者属性名根本不存在）
• ⚠️ 如果你用 PostCSS autoprefixer，记得配置 ios_saf <= 15.4，否则不会自动插入这个前缀

DevTools 里 position 显示为 static 就是前缀没起作用

这不是渲染延迟，也不是样式覆盖，而是浏览器压根没解析成功。检查 computed 样式时，如果 position 值是 static，说明 -webkit-sticky 根本没生效。

• 逐级点开父元素，在「Computed」面板里查看每一层的 position 值，看是否始终为 static
• 临时删掉其他样式（比如 transform、filter），这些属性会创建新的层叠上下文，让 -webkit-sticky 的参考系错乱
• 别用 @supports (position: sticky) 来做检测——它在旧版 Safari 里返回 false，但你仍然需要提供 -webkit- 版本才行

仅靠前缀还不够：祖先的 overflow 会静默关掉 -webkit-sticky

-webkit-sticky 和 sticky 一样，会被任意祖先元素的 overflow: hidden、auto 或 scroll 静默禁用——哪怕那个容器实际上根本没有滚动内容。

• 微信小程序的 scroll-view、Ant Design 的 .ant-modal-body、Vant 的 .van-card 都默认加了 overflow: hidden
• 用 DevTools 从 sticky 元素往上，逐层检查父级的 computed overflow-x 和 overflow-y
• 如果不能删除 overflow，可以考虑改用 clip-path: inset(0) 来替代，视觉效果一致，但不干扰粘性定位

真正难的不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。值得警惕的是，这种静默失效在排查时往往最容易被忽略，而它恰恰是导致一切看起来“没问题”但实际不工作的根本原因。