Safari 中 sticky 表头失效是因可滚动容器判定严格：祖先含 overflow:hidden/auto/scroll 且未实际滚动时，sticky 静默降级为 static；iOS Safari 15.4 及更早需前置声明 position: -webkit-sticky。
sticky 表头在 Safari 里不固定，不是 top 没设对，而是它根本没进入 sticky 流程——DevTools 里 position 显示为 static 就是铁证。
为什么 Safari 的 sticky 表头直接退化成 static
Safari 对 sticky 的“可滚动容器”判定极严：只要表头任意一层祖先（哪怕 .ant-table-body 或 .van-list 这类组件内部 wrapper）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身没实际滚动（比如内容未溢出、高度固定），sticky 就会被静默降级为 static。
常见藏雷位置包括：.ant-table-body（Ant Design 表格默认加 overflow: auto）、.van-list（Vant 列表外层）、微信小程序的 scroll-view、以及任何带 display: inline-flex 的父容器（它不创建 BFC，Safari 直接忽略 sticky）。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 临时验证方法：在 Safari DevTools 中选中表头元素 → 逐级点击
parentElement→ 查每层的overflow-x和overflow-y计算值；找到值为hidden、auto或scroll的节点，右键删掉它的overflow声明，看表头是否立刻吸附 - 别信
@supports (position: sticky)—— 它在 iOS Safari 15.4 及更早版本返回false，但你仍需提供前缀
必须前置声明 position: -webkit-sticky
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序写错整行 CSS 就被跳过。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
position: -webkit-sticky;必须在前，position: sticky;在后 - ❌ 错误写法：
position: sticky;在前；或写成-webkit-position: sticky（属性名不存在） - PostCSS 用户：确认
autoprefixer配置包含ios_saf ，否则不会插入前缀 - DevTools 里
position显示为static？说明前缀压根没生效，不是样式覆盖，是解析失败
用 clip-path: inset(0) 替代 overflow: hidden
很多表格/列表容器加 overflow: hidden 是为了裁圆角、防内容穿出，不能真删。这时用 clip-path: inset(0) 是最轻量、兼容性最好的替代方案。
-
clip-path: inset(0)在 Safari 13.4+（即 iOS 13.4+）已全面支持，2026 年无需兜底 - 视觉效果和
overflow: hidden完全一致（包括保留border-radius），但不创建新 BFC、不干扰 sticky 的包含块计算 - ⚠️ 别写成
clip-path: inset(0px)—— 带单位的部分旧版 Safari 解析不稳定 - 如果祖先同时有
overflow: hidden和border-radius，只需替换overflow，border-radius照常生效
表格结构下 sticky 更容易失效的细节
原生 <table> 或封装的表格组件中，sticky 表头往往挂在 <code>display: block 或 display: table 容器下，但 Safari 要求“可滚动区域”必须显式可测。
- 确保表格主体容器（如
.ant-table-body）有明确max-height+overflow-y: auto，不能只靠height: 100vh（iOS Safari 中vh会随地址栏显隐抖动，导致 sticky 频繁重置） - 避免把 sticky 表头直接放在
display: flex或display: grid容器里；若必须，给父容器加align-items: flex-start（防止stretch干扰“进入视口”的判断） - 表格本身要冻结表头，
table-layout: fixed是硬门槛；否则 Safari 可能因列宽未定而跳过 sticky 计算
真正难的不是补 top: 0，而是找到那个没写在你 CSS 里、却由组件库自动注入的 overflow: hidden —— 它可能藏在 node_modules 某个 wrapper 的内联样式里，也可能来自一行被遗忘的 CSS-in-JS 注入。
