WebView中transition白屏是图层切换卡顿所致，需为过渡元素添加transform: translate3d(0, 0, 0)触发合成层，合并已有transform，避免will-change冲突，并优先用rgba替代opacity。
WebView里transition一动就白屏，根本不是CSS写错了
白屏闪烁在WebView中不是渲染失败，而是图层切换卡顿：元素开始过渡时，浏览器来不及把目标区域提升到独立合成层，前几帧被迫用CPU重绘，空白或撕裂就出现了。尤其在Android 4.4–6.0原生WebView、iOS 15.2以下Safari中高频复现。
必须给transition元素加transform: translate3d(0, 0, 0)，不能只写translateZ(0)
安卓旧版WebView对translateZ(0)识别率低，translate3d(0, 0, 0)才是稳定触发合成层的最小有效写法。注意三点：
- 必须加在「正在做transition的元素本身」上，不是父容器
- 如果元素已有其他transform（比如
scale(1.1)），要合并写成transform: scale(1.1) translate3d(0, 0, 0)，顺序无关，但不能覆盖原有变换 - 避免和
will-change: transform同时存在——二者叠加反而可能让Chrome分裂出冗余图层
opacity过渡闪得最狠？换用rgba()或强制锁定父层
opacity过渡在WebView中极易触发图层降级。优先按场景选解法：
- 背景色/边框/文字透明 → 改用
rgba()，例如background-color: rgba(0, 0, 0, 0.8)，完全绕过opacity合成问题 - 整层遮罩或需要透出下方内容 → 必须用
opacity，但要给该元素加transform: translate3d(0, 0, 0)，且确保父容器没设overflow: hidden（它会压制子元素图层创建） - 父容器自身有滚动或动画 → 给父容器也加
transform: translate3d(0, 0, 0)，防止其合成层被意外销毁
真机测试前必须关掉devtools里的“Emulate CSS media”
Chrome DevTools模拟移动设备时开启Emulate CSS media，会掩盖真实图层行为——你看到的不闪，真机上大概率闪。关键验证点：
立即学习“前端免费学习笔记（深入）”；
- 在Android 5.1真机或iOS 14.8 Safari里打开页面，手动触发transition，看首帧是否跳白
- 用
getComputedStyle(el).transform确认translate3d已生效（返回值不是none） - 若用Swiper等库，
translate3d必须加到<img>标签本身，而不是.swiper-slide容器——外层加了等于没加
最容易被忽略的是：transition声明必须写在初始class里，不能只写在:hover或.active里；否则首帧没有图层预热，白屏必现。
