对fixed元素直接设will-change: transform无效，因滚动时其transform值未变；应使用transform: translatez(0)或translate3d(0,0,0)触发gpu合成层，配合动态增删will-change及优化滚动容器性能。
给fixed元素加will-change: transform基本无效
直接写 will-change: transform 在 position: fixed 元素上，浏览器大概率忽略——因为滚动或缩放时，该元素的 transform 值根本没变，它只是被视口坐标系“拖着走”。Chrome 95+ 已在控制台明确警告：will-change: transform is deprecated for non-transforming elements。更糟的是，它可能让 fixed 元素意外降级：一旦父容器有 transform、filter 或 opacity ，fixed 就会脱离视口基准，变成 relative 行为。
真正起效的是 transform: translateZ(0) + will-change: transform
要让 fixed 元素进独立合成层，必须显式触发硬件加速，而不是靠 will-change 提示。关键动作是：
- 必须写
transform: translateZ(0)或transform: translate3d(0, 0, 0)—— 这才是浏览器创建 GPU 图层的开关 - 可追加
backface-visibility: hidden，比translateZ(0)更轻量，还能避免部分安卓 WebView 的图层降级 -
will-change: transform只在动画开始前动态加、结束后立刻清空（如element.style.willChange = 'auto'），不能写死在 CSS 里 - 避免用
width: 100vw或right: 0，改用inset: 0（现代支持良好）或固定宽高 + 微调transform
移动端 fixed 抖动别碰 will-change: scroll-position
iOS Safari 中 fixed 滚动抽搐，本质是 WebKit 主动剥离 fixed 元素与视口的锚定关系，靠低频采样同步位置。此时加任何 GPU 相关声明都无效。最稳解法是把滚动容器从 body 移到子元素：
.scroll-container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
body {
height: 100vh;
overflow: hidden;
}
若必须保留 body 滚动，可尝试 viewport-fit=cover + env(safe-area-inset-top)，但需注意 iOS 16.4+ 才完全支持。
真正该加 will-change 的地方是滚动容器本身
滚动性能瓶颈不在 fixed 元素，而在滚动位移本身。所以：
- 整个页面滚动 → 给
html或body加will-change: scroll-position（Chromium 115+/Safari 17.4+ 支持） - 局部容器滚动（如
.list-wrapper）→ 加在该容器上，且必须有明确尺寸（height或max-height）和overflow: auto/scroll - 禁用
will-change: scroll-position在body上长期挂载——它只对即将发生的滚动预热有效，已滚动中加了也白加 - 用 Chrome DevTools → Rendering → “Layer borders” 确认是否真多出一层，别靠感觉
容易被忽略的一点：fixed 元素卡顿，90% 是主线程被滚动监听阻塞，不是图层问题。先检查 scroll 回调里有没有读写 scrollTop 或 getBoundingClientRect()，再谈 will-change。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
