移动端页面跳转闪屏是因新页面首帧前未建立稳定合成图层，需在根容器上同时设置transform: translatez(0)和backface-visibility: hidden，缺一不可，且避免display切换与错误层级。
移动端页面跳转时的闪屏，不是 CSS 写错了，而是浏览器在新页面首帧渲染前，未及时建立稳定合成图层，导致 Safari 或安卓 WebView 用 CPU 软件路径临时绘制——这一帧“白一下”或“内容重绘一下”，就是你看到的闪屏。加 backface-visibility: hidden 有效，但必须配对 transform: translateZ(0)，且只加在关键容器上。
为什么页面跳转时会闪，而不是滚动时闪
跳转（如 location.href、router.push、uni-app 的 navigateTo）触发的是全新文档上下文或 Vue/React 组件挂载，此时 DOM 刚插入、样式刚计算、图层尚未预热。Safari 尤其激进：它不会为“还没动过”的元素提前建合成层，直到第一帧动画或 transform 变更发生——而那一帧已经晚了。这和滚动中 fixed 元素闪烁的机制不同，后者是图层竞争；跳转闪是图层“没来得及建”。
常见现象包括：body 或根容器闪白一帧、文字模糊跳动、图标重绘延迟、甚至整个页面“抖一下”才恢复正常。
backface-visibility: hidden 必须和 translateZ(0) 配合使用
backface-visibility: hidden 单独写无效，它不触发硬件加速，只是告诉浏览器：“一旦你为我建了合成层，请锁定背面”。真正触发建层的是 transform 属性。现代 Safari（iOS 15.4+）和 Chrome（Android 100+）要求这个 transform 是“非空且明确的”，translateZ(0) 是最轻量、最可靠的选择。
- 正确写法：
.page-root { transform: translateZ(0); backface-visibility: hidden; } - 错误写法：
.page-root { backface-visibility: hidden; }（无 transform，不建层） - 错误写法：
.page-root { transform: translateX(0); backface-visibility: hidden; }（旧版安卓 WebView 可能忽略 XY 轴触发） - 避免
will-change: transform—— 它会持续占用内存，且在跳转场景下无必要
该加在哪个元素上？别加错层级
必须加在「跳转后立即渲染的根级容器」上，通常是页面主体最外层 wrapper，比如 #app、.page-wrapper、.uni-page-body（uni-app），而不是 body 或 html —— 后两者在部分 WebView 中无法稳定提升图层。
尤其注意 uni-app 和 Taro 类框架：
- uni-app：加在
.uni-page-wrapper或你自定义的.page-content上，不要只加在.custom-navbar里（导航闪≠整页闪） - Taro：加在
.taro-page或View[data-page]的直接父容器 - Vue SPA：加在
#app，且确保该 class 在初始 HTML 中就存在，而非 JS 挂载后动态添加 - 避免加在条件渲染的元素上（如
v-if="loaded"的容器）—— 图层需在首次渲染前就存在
真机测试时最容易忽略的三件事
开发工具里不闪，不代表真机 OK。iOS WebView 对图层策略更敏感，尤其在低内存或后台切回场景下：
- 务必用 Safari 真机 + Web Inspector → Layers 面板确认目标元素是否真的单独成层（有独立“Composited Layer”条目）
- 如果用了
display: none/v-show控制页面显隐，改用opacity: 0; pointer-events: none;+ transition，否则图层会被销毁 - 跳转后首帧动画若由 JS 触发（如
setTimeout(() => el.classList.add('in'), 0)），请改用requestAnimationFrame包裹，确保样式变更进入下一绘制周期
真正稳定的跳转体验，靠的不是堆属性，而是让合成层在第一帧前就位——transform: translateZ(0) 是钥匙，backface-visibility: hidden 是保险栓，缺一不可，且只能装在对的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
