旧安卓机黑屏主因是图层泄漏，will-change: transform 在 android 4.4–6.0 webview 中持续分配 gpu 图层却不回收，导致 oom 黑屏；需动态添加并立即清理 will-change，禁用嵌套 transform 和 transition: all，主动重置样式以释放图层。
旧安卓机黑屏主因是图层泄漏，不是CSS写错了
旧安卓 WebView（Android 4.4–6.0）的合成器存在内存管理缺陷：will-change: transform 一旦设上，动画期间会持续分配 GPU 图层却不回收，几秒后就触发 OOM，直接黑屏或白屏。这不是你 keyframes 没写对，也不是没加 -webkit- 前缀——是底层渲染线程把内存吃光了。
- 真机复现极快：一个轮播图 +
will-change: transform，滑动 10 次大概率黑屏 - DevTools 里看不到报错，但 Rendering 面板中“Layers”数持续上涨不回落，就是铁证
- 黑屏常伴随页面卡死、返回键失灵，重启 WebView 才能恢复
必须删掉所有 will-change，除非你能手动控制生命周期
will-change 在旧安卓上不是优化手段，是定时炸弹。全局搜索项目里的 will-change，优先全部删除；仅当实测卡顿严重且确认是合成层缺失导致时，才考虑局部启用，并严格控制其存在时间。
- 绝对不要写在 CSS 文件里长期生效，比如
.slide { will-change: transform; } - 如需临时启用，用 JS 在动画前一帧动态添加：
el.style.willChange = 'transform' - 必须在
animationend或transitionend回调里立刻清理：el.style.removeProperty('will-change') - 避免和
backface-visibility: hidden同时使用——两者叠加会加剧图层隔离，让 absolute 元素直接消失
嵌套 transform 是图层爆炸的加速器
父容器 translateZ(0) + 子元素 scale(0.9) + 孙元素 rotate(5deg)，旧引擎无法复用图层，会为每层单独分配 GPU 内存。3 层嵌套就可能占用 40MB+，远超 WebView 默认上限（通常 32MB）。
- 用
getComputedStyle(el).transform在真机控制台检查实际生效的矩阵，确认是否有多余嵌套 - 把多层 transform 合并到最内层元素上，例如：
transform: translateX(20px) scale(0.9) rotate(5deg) - 禁用所有未限定属性的
transition: all，旧引擎会为每个可动画属性预分配缓冲区，白白耗内存
真正要盯住的不是动画本身，而是图层生命周期
旧安卓 WebView 不会在动画结束后自动释放图层。哪怕你把 opacity 和 transform 全部清空，残留的合成层仍驻留内存，后续动画或滚动就会直接崩。所以每次动画结束，除了重置样式，还得主动干预图层状态。
- 在
animationend中执行：el.style.transform = ''、el.style.opacity = ''，防止样式残留干扰 GC - 对 ScrollReveal.js 等库保持警惕：它默认批量创建 IntersectionObserver + transform 动画，在 Android 5.1 上 10 个元素就可能阻塞主线程
- 降级方案更稳：安卓 4.4 及以下优先用
requestAnimationFrame+style.left/top，禁用will-change和复杂transform
图层不会自己消失，得你亲手关灯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
