为什么CSS transition在Safari里表现异常？

Safari中transition不生效的根本原因是其对可动画属性、合成层管理、前缀顺序和触发时机要求更严格。典型问题包括漏写或后置-webkit-transition、使用不可插值属性（如display:none、height:auto）、未用translateZ(0)+backface-visibility:hidden稳定图层、border-radius+overflow+transition组合裁剪失效，以及transition-delay:0s被跳过等。

根本原因不是“Safari不支持transition”，而是它对可动画属性、合成层管理、前缀规则和触发时机的要求比其他浏览器更严格——稍有偏差就静默失效或视觉闪烁。

transition在Safari中不生效的典型场景

常见错误现象包括：加了transition但元素一动就跳变、hover时没过渡、JS切换class后动画直接卡住。这往往不是CSS写错了，而是以下任一条件没满足：

1. transition声明只写在@media块里，常态下无该规则，起点不存在就无法插值
2. 用了display: none、height: auto、background-size: cover等Safari明确不支持插值的值
3. 漏写-webkit-transition，或把它写在标准transition之后（必须前置）
4. 过渡属性是left/top/width，但没配套transform: translateZ(0)或will-change: transform

为什么transform/opacity在Safari上也闪？

即使用了transform和opacity，iOS Safari（尤其是15.4–16.6）仍可能闪烁，因为图层未稳定。WebKit默认不为每个动画元素单独建合成层，帧间反复销毁重建会导致白边、文字抖动。

1. 必须在**动画元素自身**加transform: translateZ(0); backface-visibility: hidden;，顺序不能颠倒
2. 父容器设will-change对子元素无效，且will-change滥用会拖慢首屏
3. 真机测试不可替代：桌面Safari的Layers面板显示成层，不等于iPhone上也成层
4. 避免同时用filter或backdrop-filter，它们在iOS WebView中可能强制降级CPU渲染

border-radius + overflow: hidden + transition组合失效

Safari在transition过程中会松动裁剪边界，导致圆角外内容短暂溢出——这不是bug，是WebKit对overflow和border-radius协同更新的保守策略。

1. 不能依赖overflow: hidden做动态裁剪，必须用-webkit-mask补位
2. 推荐写法：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 100%); mask-size: 100% 100%;
3. 若用transform: scale()动画，父容器需同步加will-change: transform，否则裁剪更易脱钩
4. 慎用clip-path替代：它在Safari 15.4+才支持过渡，旧版直接忽略

最常被忽略的点是：Safari对“可动画属性”的判断比Chrome更严，且对transition触发时机更敏感——比如transition-delay: 0s在某些版本会被跳过，得改成0.01s并配合requestAnimationFrame确保样式已计算完毕。