Safari中transition闪烁是因WebKit对合成图层复用过于保守，需在动画元素上写transform: translateZ(0); backface-visibility: hidden;顺序不可颠倒，且加在父容器或搭配filter/backdrop-filter等会失效。

为什么Safari里transition一动就闪，Chrome却没事

根本不是CSS写错了，而是WebKit渲染引擎对合成图层（compositing layer）复用太保守。当元素做transform或opacity过渡时，若没明确信号告诉浏览器“这个元素要稳定成层”，它就会在帧之间反复销毁/重建图层，导致重绘、白边、文字抖动。Chrome和Firefox策略更宽松，所以看起来“正常”。

backface-visibility: hidden加在哪才起作用

它不开启GPU加速，只是向浏览器发指令：“请为我单独建一个稳定图层”。但必须满足三个硬条件：

• 必须写在「正在动画的元素本身」上，比如.slide-item { backface-visibility: hidden; }——加在父容器上完全无效，该属性不继承
• 必须紧接在transform声明之后，且transform不能是none或空值；推荐写法：transform: translateZ(0); backface-visibility: hidden;
• 如果元素真要做翻转（如rotateY(180deg)），背面需显示，则必须设为visible，否则内容消失

哪些情况加了也白加

backface-visibility: hidden只管图层稳定性，不是万能膏药：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 用left/top做过渡 → 触发重排（reflow），得换成transform: translate()
• 动画中突然设display: none → 图层被销毁，过渡中断；应改用opacity: 0 + transform: scale(0.99)控制显隐，动画结束再移除DOM
• 同时用了filter或backdrop-filter → 可能强制降级到CPU渲染，尤其在iOS WebView中
• 过渡声明只写在:hover或JS动态添加的class里 → 浏览器按默认状态先渲染，再跳变，闪的就是这一跳；必须写在初始类中

真机测试比DevTools准得多

桌面版Safari和iOS WebView的图层策略有差异，有些闪烁只在iPhone上出现，且仅在首次动画或页面滚动后发生。开发时看着不闪，不代表真机OK。务必在Safari真机上打开Web Inspector → Layers面板，确认目标元素是否真的单独成层——没成层，加什么都白搭。

立即学习“前端免费学习笔记（深入）”；