加 will-change 会让 sticky 更不灵，因为 safari 遇到 will-change 的祖先会创建新滚动上下文，截断 sticky 查找路径，致其退化为 static。
position: sticky 在 Safari 下不会因为加 will-change 而“修复闪烁”——它根本不是闪烁问题，而是粘性行为被静默禁用。加 will-change: transform 反而会让 sticky 失效更彻底。
为什么加 will-change 后 sticky 更不灵了
Safari（尤其是 iOS 15.4 及更早）遇到设置了 will-change 的祖先元素时，会强制创建新的层叠上下文和**新的滚动上下文**。这意味着 position: sticky 不再相对于视口或你期望的容器计算吸附位置，而是被截断在那个 will-change 节点内部——结果就是：元素看起来“卡住不动”或“突然消失”，DevTools 里 computed position 显示为 static。
这不是渲染抖动，是定位逻辑被重定向。常见误操作包括：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 给 Modal、Card 或 Swiper 根节点加
will-change: transform（为了“优化”动画），顺手废掉了子级所有sticky元素 - 在父容器上写
will-change: scroll-position—— Safari 不支持该值，整条声明被忽略，但已触发新层叠上下文 - 和
transform、filter混用，叠加出多层隔离，sticky 层级链直接断裂
will-change 和 sticky 的真实关系
will-change 本身不解决任何 sticky 行为问题，也不提供硬件加速来“稳定吸附”。它的作用仅限于提前告知浏览器“这个元素接下来可能变”，从而预分配图层资源。但对 sticky 来说：
- 加在 sticky 元素自身上：
will-change: transform会触发新层叠上下文 → sticky 立即退化 - 加在父容器上：只要该容器是 sticky 元素的**最近滚动祖先**，就直接切断粘附路径
- 加在更上层祖先上：只要存在任意一级带
will-change、transform、filter或perspective，Safari 就可能截断 sticky 的包含块查找
真正要检查的三处硬性前提
当 sticky 在 Safari 里“不动”“闪一下就没了”或“只在部分机型生效”，优先验证以下三点，而不是加 will-change：
-
top/bottom/left/right是否显式设置？只写position: sticky不够，缺一个值都无效 - sticky 元素的**最近滚动祖先容器**是否同时满足：
overflow-y: auto或scroll+max-height或height（不能是height: auto或overflow: hidden） - CSS 声明顺序是否为：
position: -webkit-sticky;在前，position: sticky;在后？iOS 15.4 及更早版本只认前者，且顺序错会导致整条position规则被丢弃
容易被忽略的真机细节
iOS Safari 的 sticky 行为在桌面版 Safari DevTools 里经常“看起来正常”，但真机上失效。原因包括：
- 地址栏显隐导致
vh高度跳变，如果父容器依赖height: 100vh，sticky 边界会反复重算 - 手指惯性滚动超出边界时（iOS 弹性滚动），sticky 元素可能被 Safari 临时降级为
fixed再切回，造成视觉闪动 - 某些 WebView 嵌入场景（如 Cordova、React Native Webview）中，
-webkit-sticky支持更碎片化，必须实测 iOS 14–16 各版本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
