残影不是动画未结束，而是fixed/sticky元素在滚动帧中因布局不稳定、合成层尺寸错位或父容器塌陷，导致旧渲染帧未清除而与新帧视觉重叠；根源在父容器高度不可控，硬加translatez(0)反而加剧错位。
残影不是动画没结束，而是图层错位叠加
所谓“残影”，不是动画卡住或没执行完，而是 fixed/sticky 元素在滚动帧中因布局不稳定、合成层尺寸错位、或父容器塌陷，导致旧渲染帧未被及时清除，新旧图层视觉重叠。常见于导航栏、悬浮按钮、侧边栏等定位元素高速滚动时——边缘发虚、内容分离、甚至出现双影。这不是 CSS 写错了，是浏览器 composite 阶段没对齐。
先稳住 layout，别急着加 translateZ(0)
90% 的残影问题，根源在父容器高度不可控：图片异步加载未预留空间、float 未闭合、flex 子项未设 min-height，都会让 fixed 元素的定位基准在滚动中漂移。此时硬加 translateZ(0) 反而会强制创建额外合成层，加剧错位。
- 用
aspect-ratio或padding-top占位图，确保图片加载前后容器高度不变 - 弃用
float，改用display: flow-root（现代浏览器）或overflow: hidden闭合父容器 - 检查
getComputedStyle(el).height在滚动前后是否突变，突变即为 layout 不稳定信号
合成层策略要克制，backface-visibility 更安全
translateZ(0) 是“暴力提层”，will-change: transform 是“提前预约”，但两者都可能引发内存开销或 iOS 输入框失焦。对已脱离文档流的定位元素，更稳妥的是用 backface-visibility: hidden —— 它不新建图层，只提示浏览器优化重绘路径，且无副作用。
- 仅对真正高频重绘的元素启用：
.nav-fixed { backface-visibility: hidden; } - 若必须用
will-change，JS 中动画开始前 1 帧设置：el.style.willChange = 'transform';，监听transitionend后立刻清空 - 避免写
* { will-change: transform; }，安卓低端机易 OOM
Firefox 老版本残影可临时加全屏 fixed 层兜底
Firefox 3–3.6 存在已知 bug：fixed 元素遮罩区域外的内容会被错误切割，表现为“内容分离式残影”。该问题无法通过 CSS 修复，但可用一个全屏、透明、无交互的 fixed 层覆盖整个视口，强制浏览器重置合成逻辑。
/* 仅限 @-moz-document url-prefix() 内使用 */
.wrap_shadow {
position: fixed;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
border: 1px solid transparent;
}
这个方案是纯补丁，只在确认用户 UA 为老版 Firefox 时动态注入，其他环境完全不加载。
残影真正的复杂点在于它是“叠加故障”：父容器塌陷 + 滚动锚定失效 + 合成层错位 + 图片加载抖动，任意一环松动，高速滑动时就会突然暴露。调试时别只盯着动画属性，先开 Chrome DevTools → Rendering → 勾选 “Layer Borders” 和 “Paint flashing”，看绿色图层是否稳定、重绘范围是否异常扩大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
