旧安卓机滑动黑屏是因will-change: transform在Android 4.4–6.0 WebView中持续分配GPU图层不回收，触发OOM；需删除所有静态声明，改用JS动态设置并及时清理，避免嵌套transform和filter滥用。
为什么旧安卓机一滑动就黑屏
根本不是 CSS 写错了，是 will-change: transform 在 Android 4.4–6.0 WebView 里持续分配 GPU 图层却不回收，几秒后触发 OOM 直接黑屏。DevTools 的 Layers 面板里图层数只涨不跌，就是铁证。
必须立刻删掉所有静态 will-change 声明
全局 CSS 文件里写 .slide { will-change: transform; } 等于给每个元素预装一颗内存炸弹。真机上轮播图滑动 10 次大概率卡死+白屏，且无任何 JS 报错。
- 搜索项目全部 CSS 文件，删掉所有
will-change声明 - 如需临时启用，改用 JS 在动画前一帧动态设置：
el.style.willChange = 'transform' - 必须在
animationend或transitionend回调里立刻清理：el.style.removeProperty('will-change')，设为空字符串或'auto'都无效
嵌套 transform 是图层爆炸加速器
父容器 translateZ(0) + 子元素 scale(0.9) + 孙元素 rotate(5deg)，旧引擎无法复用图层，3 层就可能吃掉 40MB+ GPU 内存（WebView 默认上限通常仅 32MB）。
- 用
getComputedStyle(el).transform在真机控制台检查实际矩阵，确认是否有多余嵌套 - 把多层 transform 合并到最内层元素：
transform: translateX(20px) scale(0.9) rotate(5deg) - 禁用
transition: all—— 它会让浏览器为每个可动画属性预分配缓冲区，纯属浪费内存
filter 和 backdrop-filter 的内存陷阱
对每个列表项都加 will-change: filter，或给毛玻璃背景滥用 blur(20px)，极易在低端机上引发图层反复创建销毁，比普通动画更耗内存。
- 毛玻璃效果必须用
backdrop-filter，且模糊半径限制在blur(10px)以内 - 悬停滤镜动画优先组合
opacity+filter，避免单独过渡blur() - 绝对不要写
will-change: filter—— 浏览器无法预判参数变化，容易误分配大量显存
真正要盯住的不是动画是否“看起来顺”，而是图层是否被及时释放。旧安卓 WebView 不会在动画结束后自动回收合成层，哪怕你清空了所有样式，残留图层仍在吃内存。每次动画结束，除了重置 transform 和 opacity，还得手动干预图层生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
