必须加 transition: transform 0.2s ease 和 touch-action: manipulation，并用 will-change: transform 提升合成层，否则放大回弹闪退、卡顿或点击无效。
点击后元素放大又回弹，但手指一松就闪退
这是因为 touchstart 和 touchend 触发太快，浏览器还没来得及渲染缩放状态就切走了。CSS 的 transform: scale() 在移动端默认不触发重排，但过渡动画需要明确告诉浏览器“这个属性要动画”。
- 必须给元素加
transition: transform 0.2s ease，不能只写transition: all—— iOS Safari 对all动画支持不稳定 - 用
:active伪类在真机上基本失效（iOS 不触发），得靠 JS 绑定touchstart/touchend并切换 class - 放大后若内容溢出，记得加
overflow: hidden，否则缩放时边缘会撕裂或出现滚动条抖动
scale 放大后文字模糊、图标锯齿
这是设备像素比（dpr）和 CSS 缩放叠加导致的渲染失真。浏览器对非整数倍缩放做插值处理，尤其在 retina 屏上更明显。
- 避免用
scale(1.3)这类非整数倍，优先尝试scale(1.25)或scale(1.5)—— 更接近硬件缩放粒度 - 对图标类元素，用
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Chrome）强制锐化 - 文字模糊时，加
-webkit-font-smoothing: subpixel-antialiased，禁用系统自动灰度抗锯齿
点击区域太小，手指按下去没反应
移动端 click 有约 300ms 延迟，且 touchstart 默认不阻止默认行为，容易被滚动干扰。
- 给目标元素加
touch-action: manipulation，既消除 300ms 延迟，又禁止误触滚动 - 确保点击区域至少 44×44px（iOS 最小触控建议），可用
padding或min-width/min-height扩展，别只靠scale拉伸视觉大小 - 如果父容器有
overflow: scroll，子元素缩放时可能被裁剪，需加transform-style: preserve-3d防止层叠上下文截断
安卓低端机卡顿、动画掉帧
transform 理论上走 GPU，但低端 Android WebView（如 X5 内核）常把 scale 当作重绘操作，尤其嵌套多层时。
立即学习“前端免费学习笔记（深入）”；
- 把要缩放的元素提升为独立合成层：
will-change: transform，但别滥用——每个都加会吃内存 - 避免在
scale同时修改width/height或margin，这会强制触发 layout，直接卡死 - 测试时用 Chrome DevTools 的 Rendering 面板勾选 “FPS meter”，看是否稳定在 60fps；低于 45fps 就得砍掉其他动画或降级为
opacity切换
touch-action: manipulation 和 will-change 的组合，不加它们，效果看起来像“做了但没完全做”。 
