Safari中CSS Sticky失效是因祖先容器overflow:hidden/auto静默降级为static；需用DevTools逐级检查overflow计算值，替换为clip-path:inset(0)或提升sticky元素层级，并确保flex/grid父容器有明确滚动上下文和正确声明顺序。
在Safari浏览器中，CSS Sticky属性在复杂滚动嵌套结构里突然不吸附、不固定、甚至完全随文档流滚动，不是代码写错了，而是某个隐藏的祖先容器悄悄加了overflow: hidden或overflow: auto，且自身没实际滚动内容，导致sticky被静默降级为position: static——DevTools里样式声明还在，但computed值已是static，你根本看不到报错提示。
第一步：用DevTools精准定位拦截层
打开 Safari 开发者工具 → Elements 面板选中 sticky 元素 → 切到 Computed 标签页 → 找到 overflow-x 和 overflow-y 两行，记下当前值。
点击右侧 parentElement 链接，逐级向上跳转，每跳一级都重复查看 overflow 计算值，一直查到 <body> 或 <html> 为止。
【重点盯防三层以外的祖先】 微信小程序的 scroll-view、Ant Design 的 .ant-modal-body、Vant 的 .van-card、Swiper 的壳容器，常默认注入 overflow: hidden，它们不在你写的 CSS 里，却真实存在。
立即学习“前端免费学习笔记（深入）”；
临时右键可疑节点 → Edit as HTML → 删除其 style="overflow: hidden" 或对应 class，观察 sticky 是否立刻恢复；若恢复，问题就锁定在这层。
第二步：保留视觉效果，替换危险属性
方法一：用 clip-path: inset(0) 替代 overflow: hidden
找到那个必须保留裁剪效果（比如圆角卡片、防弹窗内容溢出）但又不能删 overflow: hidden 的祖先，在它的样式里把 overflow: hidden 替换为 clip-path: inset(0)。
这一步操作起来很简单，直接覆盖即可；clip-path: inset(0) 在 Safari 13.4+（即 iOS 13.4+）已全面支持，2026 年无需兼容兜底，视觉裁剪效果和 overflow: hidden 完全一致，但不会创建新滚动上下文，sticky 行为不受干扰。
注意：别写成 clip-path: inset(0px)，带单位的部分旧版 Safari 解析不稳定。
方法二：把 sticky 元素提到更高层级
如果 DOM 结构允许，把原本卡在 Modal 或 Card 内部的 sticky 元素，剪切出来，塞进它兄弟级的、有明确 max-height 且 overflow-y: auto 的容器里，该容器外层必须是 position: relative。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
例如原结构：<div class="modal"><div class="card"><header class="sticky">标题</header></div></div> → 改为：<div class="modal"><div class="card"></div><header class="sticky">标题</header></div>，再给 .modal 加 position: relative 和 max-height: 600px。
第三步：修复 Flex/Grid 父容器的滚动上下文
第一步：给 flex 或 grid 父容器显式设置主轴方向和可滚动高度
若 sticky 元素的直接父级是 display: flex 或 display: grid，必须补上 flex-direction: column（flex）或 grid-template-rows: 1fr（grid），再加 max-height: 500px + overflow-y: auto —— 注意不是 overflow: auto，Safari 对局部滚动判定更严格，overflow-y 才能明确告诉浏览器“我在纵轴上可滚动”。
第二步：避免对齐方式干扰“进入视口”的判定
给该父容器加 align-items: flex-start，禁用 align-items: stretch 或 align-items: baseline，否则 Safari 可能无法准确计算 sticky 元素何时“进入滚动区域”。
第三步：彻底避开 inline 级容器
绝对不要把 sticky 元素放在 display: inline-flex 或 display: inline-grid 的父容器里——inline 级容器不产生 BFC，sticky 直接失效，连 fallback 都没有。
第四步：检查并修正 -webkit-sticky 声明顺序
在 sticky 元素的 CSS 规则中，确保 position: -webkit-sticky 写在 position: sticky 之前。
错误写法：position: sticky; position: -webkit-sticky; → Safari 旧版本（iOS 15.4 及更早）会因解析器遇到非法值跳过整行声明，导致整个 position 失效。
正确写法：position: -webkit-sticky; position: sticky; → 前缀优先生效，标准属性作为降级兜底，两者共存无冲突。
同时确认该元素设置了有效的偏移值，例如 top: 0；top: auto 或不写 top，sticky 在 Safari 中直接退化为 static。
