safari 中 sticky 失效主因有三：祖先 overflow 静默禁用、旧版需 -webkit-sticky 前缀且顺序严格、flex/grid 父容器或 transform 等触发新层叠上下文破坏粘性参考系。
祖先元素 overflow 静默禁用 sticky
Safari 会把任意设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先节点当作“粘性边界”，只要该容器自身不滚动（比如高度固定、内容未溢出），就直接将 position: sticky 元素降级为 position: static——DevTools 里看到的 computed position 就是 static，不是没生效，是被截断了。
- 常见藏雷位置：
.ant-modal-body、.van-card、微信小程序的scroll-view、Tab 标签页根节点 - 快速验证：在 DevTools 中选中 sticky 元素，逐级向上点开父节点，在「Computed」里查
overflow-x和overflow-y；临时删掉可疑声明看是否恢复 - 不能删
overflow？用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新滚动上下文，也不干扰 sticky 的包含块计算 - 注意：
clip-path: inset(0px)在部分旧版 Safari 解析不稳定，必须写成clip-path: inset(0)
旧版 Safari 缺失 -webkit-sticky 声明或顺序错误
iOS Safari 15.4 及更早版本完全不识别 position: sticky，只认 position: -webkit-sticky；而且 CSS 解析器遇到非法值会跳过整行声明，顺序写错就等于没写。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 不要写成
-webkit-position: sticky（属性名不存在） - PostCSS autoprefixer 必须配置目标包含
ios_saf，否则不会插前缀 -
@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
flex/grid 父容器导致 Safari 判定失败
当 sticky 元素直接挂在 display: flex 或 display: grid 容器下，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴滚动空间 + 稳定基线参考，否则容易失效。
- 给 flex 父容器加
flex-direction: column+overflow-y: auto（不是overflow: auto） - 显式设
max-height或height，不能只靠min-height: 100vh（iOS Safari 中vh会随地址栏显隐抖动） - 加
align-items: flex-start，避免stretch或baseline干扰“进入视口”的判断 - 绝对别用
display: inline-flex或inline-grid——inline 级容器不创建 BFC，sticky 直接失效
transform/filter/will-change 创建新层叠上下文
给 sticky 元素或其祖先加 transform、filter、will-change，会创建新层叠上下文和新滚动上下文，导致 sticky 参考系错乱，退化为 static。
- 加
will-change: transform不会修复闪烁，反而让 sticky 更不灵 - 常见误操作：给 Modal 或 Card 根节点加
will-change: transform，顺手废掉所有子级 sticky 元素 - 慎用
will-change: scroll-position——Safari 不支持该值，整条声明被忽略，但已触发新层叠上下文 - 真正要检查的三处硬性前提：
top是否显式设置、最近滚动祖先是否同时满足overflow-y: auto+max-height、position: -webkit-sticky是否前置
overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
