Safari中sticky定位需按版本区分支持：iOS 12.2+/macOS 10.14.4+起逐步支持，须写-webkit-sticky前缀、避免transform等干扰属性，并确保父容器可滚动。
sticky定位在Safari里不生效？先看iOS和macOS版本
不是所有Safari都支持 position: sticky，更不是加了就自动生效。iOS 12.2+ 和 macOS Mojave（10.14.4）之后的Safari才开始稳定支持，但早期版本仍需前缀，且部分场景下会静默失效。
- iOS 12.1及更早：完全不支持
position: sticky，哪怕加了-webkit-sticky也无效 - iOS 12.2–13.3：需显式写
position: -webkit-sticky，且父容器不能有overflow: hidden或transform - iOS 14+ / Safari 14.1+：原生支持
position: sticky，但若父级有will-change: transform，仍可能触发bug导致粘性失效
为什么写了-webkit-sticky还是没反应？检查这三处
常见错误不是语法写错，而是布局约束被意外破坏。Safari对sticky的“粘性边界”判定比Chrome更严格。
- 父容器必须有明确的高度或可滚动的
overflow-y: auto/scroll，纯overflow: hidden会让sticky降级为static - sticky元素自身不能设置
float、clear或display: inline-block（某些旧版Safari中会失效） - 上层祖先若有
transform、perspective、filter或will-change，会创建新的层叠上下文并截断sticky行为——这是Safari最常踩的坑
兼容写法怎么写才真正有效
不要只写前缀，要同时满足渲染条件。下面这段是经过iOS 12.2–16.4实测有效的最小可行写法：
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
/* 必须保证父容器可滚动且无干扰属性 */
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 两个
position声明必须都写，且-webkit-sticky在前（CSS解析顺序决定fallback） - 必须指定
top、bottom、left或right中至少一个值，否则Safari视作无效声明 - 避免在sticky元素或其任意祖先上使用
transform: translateZ(0)这类“强制硬件加速”的hack
替代方案：当sticky彻底不可用时怎么办
如果目标用户包含大量iOS 12.1以下设备（比如企业内网老iPad），别硬扛sticky，改用JS监听滚动做模拟更可靠。
- 用
IntersectionObserver检测元素是否进入视口顶部，比直接监听scroll事件性能更好，且Safari 12.1+已支持 - 避免用
getBoundingClientRect().top <= 0配合scroll，频繁重排会卡顿，尤其在低配iOS设备上 - 注意：JS方案无法响应
touch-action: manipulation的快速滑动，需额外处理touchmove节流
sticky本身是个轻量声明式方案，但它对环境太敏感。真正难的不是写对那几行CSS，而是判断什么时候该放弃它——尤其是当你发现加了前缀、清了transform、还调了父容器overflow，它依然在Safari里一动不动的时候。
