backface-visibility: hidden 能解决 Safari 下 transition 闪烁，但必须加在正在动画的元素本身上；因其向浏览器明确声明独立稳定图层，而 Safari 的 WebKit 对图层复用更保守，易反复重建导致闪烁。
直接说结论：backface-visibility: hidden 能解决 Safari 下 transition 闪烁，但必须加在「正在动画的元素本身」上，加错位置或搭配不当反而会让问题更糟。
为什么只在 Safari 闪，Chrome 却没事
Safari 的 WebKit 渲染引擎对合成图层（compositor layer）复用更保守。当元素做 transform 或 opacity 过渡时，若没有明确的图层隔离信号，它可能在帧之间反复销毁/重建图层，造成内容重绘、白边或文字抖动。Chrome 和 Firefox 的图层策略更宽松，所以不显眼。
常见触发场景包括：
-
transform: translateX()+opacity组合过渡 - 父容器设了
overflow: hidden，子元素又在动 - 动画元素是
inline或被filter/mask拖累，导致硬件加速被降级
backface-visibility: hidden 怎么加才起作用
它本身不开启 GPU 加速，而是向浏览器发出“请为我单独建一个稳定图层”的明确指令。关键点有三个：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须写在「动画主体元素」的 CSS 规则里，比如
.slide-in { backface-visibility: hidden; }—— 加在父容器上完全无效，因为该属性不继承 - 不要和
transform: translateZ(0)混用，后者是旧式 hack，在 iOS 16+ 反而可能干扰图层决策 - 如果元素真要翻转（如
rotateY(180deg)），就得设成visible，否则背面永远不可见
正确写法示例：
.fade-slide {
transition: transform 0.3s, opacity 0.3s;
backface-visibility: hidden;
}
哪些情况加了也白加
backface-visibility: hidden 只管图层稳定性，不是万能膏药。以下问题它解决不了：
- 用
left/top做过渡 → 触发重排（reflow），得换成transform: translate() - 动画过程中突然设
display: none→ 过渡被中断，得用opacity+transform控制显隐，动画结束再删元素 - 同时用了
filter或backdrop-filter→ 可能强制降级到 CPU 渲染，尤其在 iOS WebView 中 -
transitionend监听不到或触发两次 → 这是浏览器帧提交机制问题，和图层无关，需用getComputedStyle+ 定时轮询兜底
最容易被忽略的一点：真机测试比 DevTools 更准。Safari 桌面版和 iOS WebView 的图层策略有差异，有些闪烁只在 iPhone 上出现，且仅在首次动画或页面滚动后发生。别跳过这一步。
