ios safari（15.4–16.6）对非合成属性（如left、width、background-color）做transition会强制软件渲染，导致卡顿闪烁；应改用transform/opacity动画，合理使用will-change或translatez(0)触发gpu合成，并避免越界cubic-bezier。
transition 触发重绘时 iOS Safari 强制走软件渲染
iOS Safari（尤其是 15.4–16.6 版本）对 transform 和 opacity 以外的属性做 transition，容易触发非合成层（non-composited layer）更新，导致频繁重绘+回流，视觉上表现为闪烁或卡顿。这不是 bug，而是 WebKit 的渲染策略：它默认只对少数“可合成属性”开启硬件加速。
常见诱因包括：
- 对
width、height、left、top、background-color等非合成属性做transition - 元素未主动提升为合成层（missing
will-change或transform: translateZ(0)） -
transition与will-change同时存在但作用域不一致（比如父元素设了will-change，但动画在子元素上）
用 transform + opacity 替代 layout-changing 属性
这是最稳定、兼容性最好的解法。iOS Safari 对 transform（如 translateX、scale）和 opacity 始终走 GPU 合成，不会触发重排。
例如，想实现“从左滑入”，不要写：
.box {
left: -100px;
transition: left 0.3s ease;
}
.box.active {
left: 0;
}
而应改用：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.box {
transform: translateX(-100px);
transition: transform 0.3s ease;
}
.box.active {
transform: translateX(0);
}
- 避免使用
top/left配合position: relative/absolute做位移动画 - 颜色过渡优先用
opacity搭配visibility控制显隐，而非display: none切换 - 背景色变化若必须，可套一层伪元素并用
opacity过渡其遮罩层
强制启用合成层但别滥用 will-change
will-change: transform 能提前告诉 WebKit “这个元素即将动画”，从而分配合成层；但它不是万能开关，且滥用会增加内存开销甚至拖慢首次渲染。
正确做法是：
- 仅在真正需要动画的元素上设置，且动画开始前 1–2 帧动态添加（比如用 JS 在
mouseenter时加 class） - 动画结束后立即移除
will-change（否则持续占用图层资源） - 慎用
will-change: top或will-change: background-color—— 这些不会触发合成，反而可能干扰优化 - 替代方案：用
transform: translateZ(0)或transform: scale(1)更轻量地触发合成（兼容 iOS 12+）
检查 transition-timing-function 是否触发额外计算
iOS Safari 对某些贝塞尔曲线（尤其是含极大极小值的 cubic-bezier(0.1, 1.2, 0.3, 1.5)）在低端设备上可能因插值计算溢出，导致帧率骤降、画面撕裂。
建议：
- 优先使用预设关键字：
ease、ease-in-out、linear - 自定义
cubic-bezier时，确保所有参数都在 [0, 1] 范围内（WebKit 旧版会静默失败或抖动） - 避免在
transition中混用多个 timing function（如transition: transform 0.3s ease, opacity 0.3s linear），拆成独立 class 控制更稳妥
最常被忽略的一点：iOS Safari 的 transition 闪烁往往不是单一原因，而是「非合成属性 + 无 will-change + 复杂 timing function」三者叠加。先锁定动画属性是否属于合成友好型，再逐层加诊断，比盲目加 -webkit-transform: translateZ(0) 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
