残影是fixed/sticky元素滚动时因布局漂移、合成层错位致新旧渲染帧叠加；根源在父容器高度不可控，硬加translatez(0)加剧错位，应优先稳layout、慎用合成策略。
残影不是动画没跑完，是 fixed/sticky 元素在滚动帧中因布局漂移、合成层错位、旧渲染帧未清除，导致新旧图层视觉叠加；根源在父容器高度不可控，硬加 translateZ(0) 反而加剧错位。
为什么 fixed/sticky 元素滚动时会出残影
所谓“残影”，不是卡顿或掉帧，而是视觉上出现双影、边缘发虚、内容分离——本质是浏览器 composite 阶段不同步：定位基准（layout）在滚动中突变，但合成层（layer）尺寸/位置没对齐，旧帧残留 + 新帧叠加。
- 常见于导航栏、悬浮按钮、侧边栏等
position: fixed或position: sticky元素高速滚动时 - 触发条件多为：图片异步加载未占位、
float父容器未闭合、flex子项缺min-height，导致父容器高度在滚动中跳变 - 用
getComputedStyle(el).height在滚动前后打点，若值突变，就是 layout 不稳定信号
为什么 translateZ(0) 常让残影更严重
translateZ(0) 是“暴力提层”，它强制创建新合成层，但对已脱离文档流的定位元素，反而放大错位风险——尤其在 Safari 和旧版 Chrome 中，新层尺寸计算失准，旧层又未及时销毁，直接造成叠影。
- 别全局写
* { transform: translateZ(0); }，这是典型误用 - 真正稳妥的替代是
backface-visibility: hidden：不新建图层，只提示重绘优化，无副作用 - 仅对高频重绘元素启用：
.nav-fixed { backface-visibility: hidden; }
Firefox 老版本的残影要单独兜底
Firefox 3–3.6 存在已知 bug：fixed 元素遮罩区域外的内容会被错误切割，表现为“内容分离式残影”。CSS 无法修复，只能靠一个全屏、透明、无交互的 fixed 层强制重置合成逻辑。
- 仅限老版 Firefox 加载：
@-moz-document url-prefix() { .wrap_shadow { position: fixed; top: 0; width: 100%; height: 100%; pointer-events: none; border: 1px solid transparent; } } - 其他环境完全不注入，避免冗余
- 这个方案是纯补丁，不是通用解法
残影真正的复杂点在于它是“叠加故障”：父容器塌陷 + 滚动锚定失效 + 合成层错位 + 图片加载抖动，任意一环松动，高速滑动时就会突然暴露。稳住 layout 是第一步，别急着调图层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
