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 就是这个原因。
- 不要写成
-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 - 确保最近的非
visibleoverflow祖先是body或html，否则 sticky 会以该祖先为边界 -
filter同样会创建新层叠上下文，让-webkit-sticky参考系错乱，临时排查时可先删掉
overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
