如何修复CSS transition在WebView中的白屏闪烁

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)才是稳定触发合成层的最小有效写法。注意三点：

1. 必须加在「正在做transition的元素本身」上，不是父容器
2. 如果元素已有其他transform（比如scale(1.1)），要合并写成transform: scale(1.1) translate3d(0, 0, 0)，顺序无关，但不能覆盖原有变换
3. 避免和will-change: transform同时存在——二者叠加反而可能让Chrome分裂出冗余图层

opacity过渡闪得最狠？换用rgba()或强制锁定父层

opacity过渡在WebView中极易触发图层降级。优先按场景选解法：

1. 背景色/边框/文字透明 → 改用rgba()，例如background-color: rgba(0, 0, 0, 0.8)，完全绕过opacity合成问题
2. 整层遮罩或需要透出下方内容 → 必须用opacity，但要给该元素加transform: translate3d(0, 0, 0)，且确保父容器没设overflow: hidden（它会压制子元素图层创建）
3. 父容器自身有滚动或动画 → 给父容器也加transform: translate3d(0, 0, 0)，防止其合成层被意外销毁

真机测试前必须关掉devtools里的“Emulate CSS media”

Chrome DevTools模拟移动设备时开启Emulate CSS media，会掩盖真实图层行为——你看到的不闪，真机上大概率闪。关键验证点：

1. 在Android 5.1真机或iOS 14.8 Safari里打开页面，手动触发transition，看首帧是否跳白
2. 用getComputedStyle(el).transform确认translate3d已生效（返回值不是none）
3. 若用Swiper等库，translate3d必须加到<img>标签本身，而不是.swiper-slide容器——外层加了等于没加

最容易被忽略的是：transition声明必须写在初始class里，不能只写在:hover或.active里；否则首帧没有图层预热，白屏必现。