移动端缩放动画需加 touch-action: manipulation 防止双击/捏合触发页面缩放；iOS Safari 对非整数 scale() 易模糊，可用 will-change: transform 或 translateZ(0) 修复；入场动画应联动 opacity 避免闪烁，推荐 scale(0.8)→scale(1) 与 opacity: 0→1 组合。
移动端缩放动画必须加 touch-action: manipulation
不加这句，iOS Safari 和部分 Android 浏览器会把双击/双指捏合识别为页面缩放，直接劫持你的 transform: scale() 动画。用户点一下按钮想放大，结果整个页面 zoom 了，体验崩坏。
正确做法是给触发缩放的元素（比如按钮、卡片）显式声明：touch-action: manipulation;
它告诉浏览器：“这个区域只处理点击和轻扫，别管双击缩放”。注意：它不影响 :hover 或 :active，也不影响 JS 的 click 事件。
- 仅对需要交互的元素加，别全局写
* { touch-action: manipulation }，否则可能禁用滑动容器的滚动 - Android Chrome 从 v56+、iOS Safari 从 v13.4+ 支持，老版本 fallback 不会报错，只是没效果
- 如果同时用了
transform: scale()+transform: translateZ(0)，touch-action仍需单独加，两者不互相替代
scale() 在 iOS 上模糊？加 will-change: transform 或 translateZ(0)
iOS WebKit 渲染器对非整数 scale()（比如 scale(1.15)）容易做错采样，导致文字/边框发虚。这不是 bug，是 subpixel rendering 的权衡结果。
两种低成本修复方式：
— 给元素加 will-change: transform，提示浏览器提前升层
— 或更稳妥地加 transform: translateZ(0)（哪怕只写这一项），强制 GPU 合成
立即学习“前端免费学习笔记（深入）”；
- 别滥用
will-change：只在真正要动画的元素上加，动画结束可 JS 移除，避免内存泄漏 -
translateZ(0)兼容性更好（IE11+ 都认），但会额外创建合成层，大量使用可能增加内存开销 - 如果元素本身已有
transform（如scale(1.2) rotate(3deg)），直接追加translateZ(0)即可：transform: scale(1.2) rotate(3deg) translateZ(0)
用 @keyframes 做入场缩放时，别漏掉 opacity 联动
纯 scale(0) → scale(1) 入场，在移动端容易有“闪一下再出现”的问题——因为渲染管线里，scale(0) 时元素仍占布局空间，且初始帧可能被裁切或未触发图层合成。
推荐组合写法：
@keyframes popIn {<br> 0% { transform: scale(0.8); opacity: 0; }<br> 100% { transform: scale(1); opacity: 1; }<br>}
-
opacity: 0确保首帧不可见，消除闪烁；scale(0.8)比scale(0)更安全，避免 Safari 对 scale(0) 的异常裁剪 - 动画时长控制在 0.3–0.4s，过长显得拖沓，过短（
- 别用
animation-fill-mode: forwards锁定最终状态，除非你明确需要保持opacity: 1；否则用户快速连续触发时，可能因样式残留导致后续动画异常
滚动驱动缩放（scroll-timeline）在移动端几乎不可用
Chrome for Android 支持 scroll-timeline，但 iOS Safari 完全不识别，Firefox for Android 也无支持。硬上会导致动画彻底静默，且无法优雅降级——因为语法错误不报错，只是规则被忽略。
真实项目中，移动端滚动缩放应统一走 JS 方案：
— 用 IntersectionObserver 监听进入视口
— 配合 requestAnimationFrame 更新 style.transform
— 关键是设 threshold: [0, 0.1, 0.5, 0.9, 1]，避免滚动抖动导致反复触发
- 别监听
scroll事件：iOS 上性能差，且会阻塞主线程 - 如果必须用 CSS 方案，只能退回到简单
:hover或点击态，放弃滚动联动 - 有个隐藏坑：
IntersectionObserver在 iOS Safari 中对position: fixed元素的阈值判断不准，建议用position: sticky替代
复杂点在于，移动端的渲染路径、触摸事件流、合成层策略和桌面端根本不是一回事。很多在 Chrome DevTools 里调得完美的动画，一上真机就糊、就卡、就抢手势——问题往往不出在 scale 值本身，而在你没关掉它的“默认行为”。
