应避免top:50%配合translateY(-50%)等百分比定位与transform混合写法，改用Flex/Grid居中或整数像素transform位移，并添加backface-visibility:hidden稳定合成层，禁用will-change:transform以防无效警告和内存开销。
避免top/left百分比配合transform动画
抖动最常出现在top: 50% + transform: translateY(-50%)这类写法里——浏览器在动画帧间对百分比和小数位移做四舍五入，导致像素对齐反复偏移。这不是渲染慢，是坐标计算不一致。
- 改用Flex或Grid居中：
.fixed-center { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; } - 若必须用transform，位移值强制取整：
transform: translateY(-120px)，而非translateY(-50%)或translateY(-120.3px) - 禁用
top/left参与动画：它们触发重排，哪怕只是0.1px变化也会打断GPU合成
给fixed元素加backface-visibility: hidden
backface-visibility: hidden比transform: translateZ(0)更轻量，它向浏览器明确声明“此元素无需布局计算”，从而稳定进入独立合成层，且不会像will-change: transform那样被Chrome 95+警告废弃。
- 必须直接加在
position: fixed元素上，不能只加在父容器 - 搭配
inset: 0替代top: 0; right: 0; bottom: 0; left: 0，避免依赖视口实时计算 - 如果元素内部有
overflow: scroll或will-change: scroll-position，会干扰合成判断，需移除
别乱用will-change: transform
will-change: transform对动画过程中的fixed抖动基本无效——它只在元素**自身即将执行transform**时起作用，而页面滚动、缩放、地址栏收放等行为并不会改变该元素的transform属性值。
- DevTools Console会报
will-change: transform is deprecated for non-transforming elements - 没配
transform: translateZ(0)就加will-change，浏览器大概率忽略 - 频繁增删的弹窗、Tooltip等场景滥用，会导致内存上升、低端机卡顿
移动端Safari抖动得换滚动容器
iOS Safari里fixed抖动本质是WebKit把fixed临时降级为absolute，靠低频采样同步位置。所有GPU加速手段（包括translate3d(0,0,0)）都治标不治本。
立即学习“前端免费学习笔记（深入）”；
- 把滚动从
body移到子容器：body { height: 100vh; overflow: hidden; }+.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } -
.scroll-container必须是body的直接子元素，嵌套过深iOS可能忽略-webkit-overflow-scrolling - 真机测试不可跳过：Simulator几乎不复现；微信WebView内核常比系统Safari更老；开了“减少动画”会进一步退化合成行为
fixed元素与其父容器的堆叠上下文、滚动上下文、合成层策略三者共同撕裂的结果。改一个属性前，先用Safari DevTools的Layers面板确认目标元素是否真的进了Composited Layers。 
