如何解决CSS position:sticky在iOS旧版本中失效

iOS Safari 15.4及更早版本仅识别position: -webkit-sticky且必须置于position: sticky之前，否则整行被丢弃；需配合autoprefixer配置ios_saf <= 15.4，并排查祖先元素overflow导致的静默失效。

iOS Safari 15.4 及更早版本根本不认 position: sticky，只认 position: -webkit-sticky，而且顺序写错整条规则就失效——不是“不生效”，是直接被跳过。

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

旧版 Safari 的 CSS 解析器遇到非法值会丢弃整行。如果先写 position: sticky，再写 position: -webkit-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 元素往上点 parent，查每一层的 computed overflow-x 和 overflow-y
• 不能删 overflow？改用 clip-path: inset(0) 替代，视觉效果一致，但不干扰粘性定位

真正难的不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。