页面局部闪烁主因是GPU合成层切换失败导致CPU渲染，常见于opacity/transform过渡，尤其Safari；应避免layout属性动画、合理创建合成层，并按设备UA适配。
transition 触发时页面局部闪烁的常见原因
闪屏本质是浏览器重绘（repaint）或重排（reflow）过程中，GPU 合成层切换失败或回退到 CPU 渲染导致的视觉撕裂。最常出现在 opacity、transform、background-color 等属性过渡中，尤其在 Safari 和旧版 Chrome 上更明显。
关键不是“用了 transition”，而是「哪些属性触发了层合成失效」：
-
opacity本身支持硬件加速，但若父容器有will-change: auto或被其他 CSS（如filter、mask）拖累，可能降级为软件渲染 -
left/top这类布局属性过渡必然触发重排，比transform: translate()更容易闪 - 元素没有独立图层，动画时被强制提升又降级，造成帧间图层不一致
强制开启 GPU 加速的实操条件
不是加个 transform: translateZ(0) 就万事大吉——它只在满足一定前提时才真正创建合成层。必须同时满足：
- 目标元素不能是
display: inline（改用inline-block或block） - 不能有
overflow: hidden且父容器有transform（会抑制子元素图层提升） - 避免和
backface-visibility: hidden混用，后者在某些 iOS 版本中反而引发闪烁 - 推荐写法：
transform: translate3d(0, 0, 0)+will-change: transform，但仅对即将动画的元素设置，别全局滥用
示例修复：
立即学习“前端免费学习笔记（深入）”；
.fade-box {
/* 错误：只靠 opacity 过渡，在 Safari 中易闪 */
transition: opacity 0.3s;
<p>/<em> 正确：主动创建合成层，且用 transform 替代 layout 属性 </em>/
will-change: transform;
transition: transform 0.3s, opacity 0.3s;
}
.fade-box.active {
transform: translate3d(0, 0, 0);
opacity: 1;
}transitionend 事件监听不到或触发两次的坑
这不是 JS 问题，而是 CSS 动画模型本身的行为：当多个可过渡属性同时变化，浏览器可能分批提交帧，导致 transitionend 被多次触发；或者因图层未及时就绪，事件干脆不触发。
- 永远用
event.propertyName判断具体哪个属性结束，别假设只触发一次 - 避免监听
transitionend来做 DOM 移除——加个setTimeout延迟 1ms 更稳 - 如果用了
transform+opacity双过渡，事件可能触发两次，需去重（比如用Set记录已处理的propertyName） - 注意：Safari 对
transitionend的冒泡行为和 Chrome 不一致，别依赖事件冒泡传到父级
移动端真机调试时容易忽略的渲染开关
开发时在桌面 Chrome 看不出问题，一上 iPhone 就闪，大概率是以下两个隐藏因素：
- iOS WebKit 默认关闭部分合成优化，需确保 viewport meta 里没写
user-scalable=no（它会禁用某些渲染管线） - 微信内置浏览器（X5 内核）对
will-change支持极差，甚至会因它变卡；真机测试务必关掉will-change，改用transform: translateZ(0)单独兜底 - 部分安卓 WebView（尤其旧版）不支持
transform: scaleZ()，只认translate3d，别写scaleZ(1)自找麻烦
最保险的兜底组合：
.card {
transform: translate3d(0, 0, 0);
/* 不加 will-change，不加 backface-visibility */
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}复杂点在于：没有一刀切的写法，得看设备、内核、是否嵌套滚动容器——同一段 CSS 在 iOS 16 和 iOS 17 上表现都可能不同。真要稳定，就得按设备 UA 做最小化适配，而不是堆砌兼容性声明。
