transition在safari及旧版chrome中需同时写-webkit-transition和transition且顺序不能反；transform动画需加translatez(0)触发gpu合成；edge legacy中@keyframes须双前缀并显式写出各属性带前缀版本。
transition 属性在 Safari 和旧版 Chrome 里不生效
直接原因是 transition 没加 -webkit- 前缀，而 Safari（包括 iOS WebView）、Chrome ≤ 25、Android Browser 等 WebKit 内核浏览器只认带前缀的写法。现代浏览器虽已支持无前缀版本，但混合写法仍是稳妥选择。
- 必须同时写两行：
transition: all 0.3s ease;和-webkit-transition: all 0.3s ease;，顺序不能反——WebKit 浏览器会优先匹配第一行带前缀的声明 - 不要只写前缀版：否则 Firefox/Edge 会完全忽略，动画彻底失效
-
transition-property若用多个值（如width, opacity），前缀版也得保持完全一致，不能简写成all混搭
transform 动画卡顿或闪屏，尤其在 iOS 上
iOS Safari 对非合成层（non-composited layer）的 transform 渲染效率极低，常伴随闪烁、掉帧。加 -webkit-transform 不够，关键是要触发 GPU 合成。
- 强制启用硬件加速：在要动画的元素上加
-webkit-transform: translateZ(0);或-webkit-transform: translate3d(0, 0, 0); - 这个 hack 必须和
transition配套使用，且需写在同一个规则块里，否则 Safari 可能不识别合成意图 - 慎用
will-change: transform替代——iOS 12–14 存在内存泄漏风险，老机型更明显
animation 关键帧在 Edge Legacy（≤18）中崩溃
Edge HTML 12–18 对 @keyframes 的解析非常严格：一旦定义里出现不支持的属性（比如 filter、clip-path），整个动画会静默失败，连 opacity 这种基础属性都不动。
- 必须为
@keyframes单独加前缀：@-webkit-keyframes fade { ... }和@keyframes fade { ... }并存 - 动画中用到的每个 CSS 属性，都得在
from/to块里显式写出带前缀版本，例如-webkit-opacity: 0;+opacity: 0; - 避免在 keyframes 里调用自定义变量（
var(--x)）——Edge Legacy 完全不支持，也不报错，只是跳过整段
autoprefixer 工具生成的前缀不够用
默认配置下 autoprefixer 只覆盖“主流浏览器最近两个版本”，但实际项目常需兼容 iOS 11+、Android 4.4+ 等老旧环境，这时它漏掉 -webkit- 的概率很高。
立即学习“前端免费学习笔记（深入）”；
- 检查
browserslist配置，明确加上ios >= 11、android >= 4.4，否则工具根本不会输出 WebKit 前缀 - 对
transition和transform这类高危属性，建议在 CSS 里手动补一层-webkit-版本，别全依赖工具 - 用
npx autoprefixer --info查看当前配置实际覆盖哪些浏览器，比猜靠谱得多
真正麻烦的不是加前缀本身，而是某些属性（比如 backdrop-filter）即使加了 -webkit-backdrop-filter，iOS 15.4 之前也只在 position: fixed 元素上生效——这种限制藏得深，调试时容易绕远路。
