移动端切换后台后动画元素留下重影，本质是浏览器切后台时暂停合成器更新但未正确回收gpu图层，导致残留纹理叠加新帧；will-change若滥用（如静态声明或动画后未还原）会加剧该问题，正确做法是动画前动态设置、结束后立即设为auto，并配合visibilitychange监听清理。
移动端切换后台后动画元素留下重影，本质是浏览器在切到后台时暂停了合成器更新，但未正确回收图层或纹理缓存；will-change 本身不直接解决重影，但它若被滥用（比如长期保留在元素上），反而会加剧该问题。
重影不是动画没停，而是图层没卸载
安卓 WebView 和部分 iOS Safari 在应用切后台时，会冻结 requestAnimationFrame 和 CSS 动画计时器，但已提升为独立图层的元素可能仍驻留在 GPU 纹理中。若该元素有半透明、模糊或阴影等效果，残留的图层叠加在新帧上就会形成“重影”或“残影”。
- 常见触发场景：
transform: translateZ(0)或translate3d(0,0,0)强制升层 + 长期未清理 - 更隐蔽的原因：父容器用了
will-change: transform，但子元素动画结束后未还原，导致整个子树图层持续存在 - 验证方式：Chrome DevTools → Rendering → ✅ “Layer borders”，切后台再切回，看是否仍有高亮图层未消失
will-change 不是开关，是提示信号
will-change 的作用是在动画**开始前 1～2 帧**告诉浏览器：“这个属性马上要变”，让其提前分配图层、预上传纹理。它不是“让动画变快”的魔法属性，也不是“防止重影”的兜底方案。
- ✅ 正确用法：JS 中动态设置，动画一结束立刻设回
auto或unset - ❌ 错误写法：
div { will-change: transform; }全局静态声明，尤其对非动画元素 - ⚠️ 注意：
will-change: opacity对纯透明度动画有效，但若同时动transform和opacity，必须写全：will-change: transform, opacity，否则只优化了其中一个
真正能缓解重影的实操组合
单靠 will-change 无法根治重影，需配合图层生命周期管理：
- 动画启动前：
element.style.willChange = 'transform'; - 动画结束回调中（非 transitionend，而是 animationend 或 raf 判定完成）：
element.style.willChange = 'auto'; - 切后台监听（可选但推荐）：
document.addEventListener('visibilitychange', () => { if (document.hidden) { element.style.willChange = 'auto'; } }); - 避免副作用：不用
backface-visibility: hidden或perspective治标，它们只是掩盖闪烁，不解决图层滞留
重影问题最常被忽略的一点是：它往往不是某个 CSS 属性写错了，而是图层创建和销毁不对称——动的时候升了层，停的时候没降下来。优化重点不在“怎么动”，而在“动完怎么收”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
