Safari 中 sticky 失效主因是祖先 overflow 静默禁用或 -webkit-sticky 声明顺序错误：overflow: hidden/auto/scroll 的非滚动祖先会截断 sticky；-webkit-sticky 必须写在 sticky 前且不可用 -webkit-position。

祖先元素 overflow 静默禁用 sticky

Safari 会把任意设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先节点当作“粘性边界”，只要该容器自身不滚动（比如高度固定、内容未溢出），就会直接把 sticky 元素降级为 position: static——DevTools 里看到的 computed position 就是 static，不是没生效，是被截断了。

常见藏雷位置包括：Modal 外层 wrapper、Card 容器、Tab 标签页根节点、微信小程序的 scroll-view（默认带 overflow: auto）。

• 快速验证：在 DevTools 中选中 sticky 元素，逐级向上点开父节点，在「Computed」里查 overflow-x 和 overflow-y，临时删掉可疑声明看是否恢复
• 不能删 overflow？用 clip-path: inset(0) 替代——视觉裁剪效果一致，但不创建新滚动上下文，也不干扰 sticky 的包含块计算
• 别写成 clip-path: inset(0px)，部分旧版 Safari 解析不稳定；clip-path: inset(0) 在 iOS Safari 13.4+ 已全面支持，2026 年无兼容顾虑

-webkit-sticky 声明顺序错误

iOS Safari 15.4 及更早版本只认 position: -webkit-sticky，且 CSS 解析器遇到非法值会跳过整行声明。如果 position: sticky 写在前面，后面再跟 position: -webkit-sticky，旧版 Safari 可能直接忽略整个 position 声明。

必须写成：position: -webkit-sticky; 在前，position: sticky; 在后——否则前缀压根不生效，DevTools 里 position 显示为 static 就是这个原因。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

• 不要写成 -webkit-position: sticky（属性名不存在）
• 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 会随地址栏动态变化
• 若父容器必须滚动（如横向表格），确保它设了 display: block + overflow-x: auto，否则 Safari 可能跳过它继续往上找

transform/perspective/will-change 干扰粘性行为

在 Safari 10–12 中，sticky 元素的所有祖先若存在 transform、perspective 或 will-change，会直接导致 sticky 失效。这不是 bug，而是 WebKit 渲染层对层叠上下文和包含块的严格限制。

• 检查所有祖先节点，移除不必要的 transform: translateZ(0) 或 will-change: transform
• 确保最近的非 visible overflow 祖先是 body 或 html，否则 sticky 会以该祖先为边界
• filter 同样会创建新层叠上下文，让 -webkit-sticky 参考系错乱，临时排查时可先删掉

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