Safari中sticky失效主因是父容器无显式高度且含overflow:hidden等属性，需设min-height、避免干扰overflow，并按position:-webkit-sticky; position:sticky;顺序声明。
父容器没设 height / max-height，Safari 直接忽略 sticky
sticky 元素在 Safari 中“完全不动”，不是因为不支持，而是浏览器压根没把它当粘性元素处理——根本原因是其最近滚动祖先容器没有显式高度约束。Safari 要求 sticky 的包含块必须是一个**有明确滚动边界**的容器，而仅靠内容撑开的高度（height: auto）不满足条件。
常见错误现象：position: sticky 和 top: 0 都写了，DevTools 里 computed position 显示为 static；滚动时元素随文档流一起走，毫无吸附感。
- 给父容器加
min-height: 1px就可能让 sticky 恢复（验证是否真因高度缺失） - 生产环境优先用
max-height+overflow-y: auto组合，既提供滚动上下文，又避免父容器无限拉伸 - 若父容器是
display: flex或display: grid，还需补align-items: start（iOS Safari 15.4 前必需） - 不要依赖
height: 100vh—— 在 iOS Safari 中，vh会随地址栏显隐变化，导致高度抖动、sticky 频繁重置
Safari 下 overflow: hidden 是 sticky 的“硬拦截器”
只要 sticky 元素的任意一个祖先节点（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，Safari 就会把该节点当作 sticky 的“粘附边界”，而不是继续向上找 body 或视口。结果就是：元素只在那个被裁剪的盒子里尝试吸附，往往还没动就“撞墙”了。
典型误伤场景：Modal 组件外层、Card 容器、Tab 标签页 wrapper、Swiper 轮播父级——这些组件库默认加 overflow: hidden 防内容溢出，却顺手废掉了子级 sticky。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 临时排查：在 DevTools 中逐级向上检查
computed overflow，重点看overflow-x/overflow-y是否被间接设置 - 替代方案：用
clip-path: inset(0)替代overflow: hidden，它裁剪视觉但不创建新滚动上下文 - 若必须保留
overflow: auto（比如要内部滚动），就把 sticky 元素移出该容器，放到更高层级、有明确max-height且overflow: visible的父级里
-webkit-sticky 顺序写错，Safari 当场丢弃整条规则
Safari 旧版本（iOS 15.4 及更早）不识别 position: sticky，只认 position: -webkit-sticky。但这个前缀不是“加了就行”——CSS 解析器遇到非法属性值会跳过整行声明，如果 position: sticky 写在前面，后面再跟 position: -webkit-sticky，Safari 可能直接忽略整个 position 声明。
错误写法会导致 computed position 显示为 static，且无任何 warning 提示。
- 正确顺序必须是：
position: -webkit-sticky;在前，position: sticky;在后 - 绝对不要写成
-webkit-position: sticky—— 这个属性名不存在，浏览器直接丢弃 - 用 PostCSS 的 autoprefixer 时，确认 targets 包含
ios_saf ，否则插件可能不输出前缀 - 即使目标用户全是 iOS 16+，也建议保留前缀——Safari 的解析行为偶有回退，保底更稳
transform / filter / will-change 让 sticky 在 Safari 彻底失联
只要 sticky 元素自身，或其任意祖先节点设置了 transform、filter、will-change 或 perspective，Safari 就会强制创建新的层叠上下文和新的包含块，导致 sticky 失去原本的滚动参照系。此时元素不再相对于视口或预期容器计算位置，而是“困”在那个新上下文中，表现就是：一动不动，或吸附位置严重偏移。
这个坑特别隐蔽，因为样式可能来自全局 CSS、第三方组件、甚至 JS 动态注入（比如动画库自动加 transform: translateZ(0)）。
- 检查 DevTools 的
computed面板，搜索transform、filter、will-change，看是否意外命中 - 避免对 sticky 元素或其父级使用
transform: translateZ(0)这类“强制硬件加速” hack - 若需动画效果，改用
opacity或scale（不触发新层叠上下文） - 动态插入 sticky 元素后，可调用
getBoundingClientRect()强制触发一次重排，有时能绕过初始渲染 bug
overflow: hidden，或一个动画库偷偷塞了个 transform。Safari 对粘性定位的约束比其他浏览器更严格，排查时得像查电路一样，一层一层断开干扰源。 
