ios safari中transition抖动源于图层反复重建，需对过渡元素单独加translatez(0)预热图层，避免left/top触发重排，禁用display:none切换，真机测试才可靠。
transition抖动根本不是动画慢，是图层反复重建
iOS Safari里transition一动就抽、文字糊、边框跳，不是帧率低，而是WebKit在每帧都销毁再重建合成图层。它不像Chrome那样默认给transform或opacity过渡建稳定图层，得你手动“预热”。没这步，transition: transform 0.3s和transition: left 0.3s在视觉上根本不是一个量级。
必须用translateZ(0)，但别乱加在父容器上
transform: translateZ(0)是最小成本的图层预热手段，但它只对**正在做transition的元素本身**生效：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写在
.btn上，.btn的transform过渡才稳；写在.btn-wrapper上，.btn照样闪 - 如果元素已有
transform: scale(0.95)，就改成transform: scale(0.95) translateZ(0)，顺序不重要，但translateZ(0)必须存在 - 别给整个
.list容器加translateZ(0)——低端iPhone内存直接飙高，滚动卡顿比抖动还糟 -
translate3d(0,0,0)效果等同，但多两个参数，纯属冗余；perspective: 1000px单独加完全无效，还可能干扰子元素
left/top过渡必须换成transform
transition: left 0.3s或transition: top 0.3s在iOS Safari里必然触发重排（reflow），这是抖动源头之一：
- 把
left: 20px改成transform: translateX(20px)，再配transition: transform 0.3s - 避免在transition中混用
left和transform——浏览器会降级到CPU渲染，糊得更彻底 - 如果必须用
top控制位置（比如弹窗），确保其父容器没设transform，否则position: fixed会相对父容器定位，滚动时坐标错乱
display: none切换会中断图层，改用opacity+scale
用v-show或display: none瞬间隐藏一个带transition的元素，iOS Safari会直接销毁它的合成图层，再显示时重建，导致闪一下：
- 改用
opacity: 0; transform: scale(0.99)+transition: opacity 0.2s, transform 0.2s - 动画结束后再用JS移除DOM，或加
visibility: hidden兜底（visibility不触发布局，但保留图层） -
backface-visibility: hidden要写在动画元素上，且必须跟在transform声明后面，顺序错了等于没写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
