抖动是缩放中因transform-origin未显式设为center center、transform-style未preserve-3d、多transform函数拆分写、字体/viewport干扰导致的视觉跳变，需四者协同修复。
抖动不是动画“卡”，而是浏览器在缩放过程中因变换上下文错乱、原点偏移或插值异常导致的视觉跳变。直接加 transition 或调时长解决不了根本问题。
transform-origin 必须显式设为 center center
即使浏览器默认是 50% 50%，在快速 hover 切换或嵌套布局中，未显式声明会导致渲染层对齐失败，尤其左右并排容器间移入移出时，元素会“抽搐”一下。
- 错误写法：
transform: scale(1.2)单独出现，不带transform-origin - 正确写法：在常态样式里固定写死，例如
transform-origin: center center - 别写成
top left或像素值（如20px 30px），响应式下容易失效 - 如果要用 JS 动态跟鼠标缩放，必须每次重算百分比并完整赋值，例如
element.style.transformOrigin = '62.5% 33.3%'
嵌套缩放必须加 transform-style: preserve-3d
父容器没隔离 3D 上下文，子元素 scale() 会被降级到普通图层，和父级 padding/margin/border 计算冲突，造成边缘跳动、文字模糊或位置偏移。
- 只加在**直接包含缩放子元素的父容器**上，不要加在
body或全局 wrapper - 禁用
transform-style: flat（这是默认值，写了等于没写） - 配合
will-change: transform或transform: translateZ(0)更稳，但注意：后者在某些 Safari 版本中可能反而加剧抖动 - 同时避免子元素混用
width和scale()，否则实际占位与视觉尺寸错位，触发重排
多个 transform 函数必须写在同一声明里
把 rotate() 和 scale() 拆成两个动画、或分两次设置 transform，浏览器插值时会隐式补默认值，导致中间帧跳变。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
transform: rotate(0deg) scale(1)→transform: rotate(360deg) scale(1.3) - ❌ 错误：一个
@keyframes控制rotate，另一个控制scale - ❌ 错误：
0% { transform: rotate(0deg); }+100% { transform: scale(1.3); }（缺rotate值，浏览器可能补错） - 移动端尤其敏感，建议所有关键帧都显式写出全部函数，哪怕值没变
移动端和 Safari 需额外锁定渲染行为
iOS Safari 对合成层管理更激进，字体加载、视口微调、甚至 text-size-adjust 都可能在缩放中偷偷触发重排，造成闪动。
- 在根元素加
text-size-adjust: none，禁用自动字号调整 - 确保
<meta name="viewport">中不含user-scalable=yes，缩放期间禁止手动缩放 - 慎用
font-display: swap，字体回填可能引发内容重排；改用block或预加载关键字体 - 若仍偶发抖动，检查是否用了
mix-blend-mode或filter，它们会强制创建新图层，和scale冲突
真正难处理的抖动，往往不是某一条 CSS 写错了，而是 transform-origin、transform-style、viewport 行为、字体加载这四者叠加失效。先锁定其中一项做最小复现，再逐个排除，比堆 will-change 有用得多。
