如何解决CSS transition动画出现残影

残影不是动画未结束，而是fixed/sticky元素在滚动帧中因布局不稳定、合成层尺寸错位或父容器塌陷，导致旧渲染帧未清除而与新帧视觉重叠；根源在父容器高度不可控，硬加translateZ(0)反而加剧错位。

残影不是动画没结束，而是图层错位叠加

所谓“残影”，不是动画卡住或没执行完，而是 fixed/sticky 元素在滚动帧中因布局不稳定、合成层尺寸错位、或父容器塌陷，导致旧渲染帧未被及时清除，新旧图层视觉重叠。常见于导航栏、悬浮按钮、侧边栏等定位元素高速滚动时——边缘发虚、内容分离、甚至出现双影。这不是 CSS 写错了，是浏览器 composite 阶段没对齐。

先稳住 layout，别急着加 translateZ(0)

90% 的残影问题，根源在父容器高度不可控：图片异步加载未预留空间、float 未闭合、flex 子项未设 min-height，都会让 fixed 元素的定位基准在滚动中漂移。此时硬加 translateZ(0) 反而会强制创建额外合成层，加剧错位。

1. 用 aspect-ratio 或 padding-top 占位图，确保图片加载前后容器高度不变
2. 弃用 float，改用 display: flow-root（现代浏览器）或 overflow: hidden 闭合父容器
3. 检查 getComputedStyle(el).height 在滚动前后是否突变，突变即为 layout 不稳定信号

合成层策略要克制，backface-visibility 更安全

translateZ(0) 是“暴力提层”，will-change: transform 是“提前预约”，但两者都可能引发内存开销或 iOS 输入框失焦。对已脱离文档流的定位元素，更稳妥的是用 backface-visibility: hidden —— 它不新建图层，只提示浏览器优化重绘路径，且无副作用。

1. 仅对真正高频重绘的元素启用：.nav-fixed { backface-visibility: hidden; }
2. 若必须用 will-change，JS 中动画开始前 1 帧设置：el.style.willChange = 'transform';，监听 transitionend 后立刻清空
3. 避免写 * { 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”，看绿色图层是否稳定、重绘范围是否异常扩大。