根本原因是父容器未隔离变换上下文，导致缩放触发重排或合成层错乱；必须为父容器设置 transform-style: preserve-3d，并避免 width/height 与 scale 混用，配合 viewport 锁定和 text-size-adjust: none 可彻底解决抖动。
嵌套盒模型用 transform: scale() 动画时抖动，根本原因不是缩放本身，而是父容器未隔离变换上下文，导致子元素缩放后触发重排或合成层错乱。
为什么嵌套结构下 scale 会抖动
当一个带 scale() 的子元素位于未设置 transform-style 或 will-change 的父容器中，浏览器可能将其降级到普通图层渲染；尤其在父子都有 padding/margin/border 时，缩放会“撑开”或“压缩”布局空间，视觉上表现为边缘跳动、文字模糊或位置偏移。
- 父容器若用了
flex或grid布局但未设overflow: hidden，缩放后子元素溢出可能触发重绘抖动 - 子元素设置了
width: 100%+scale(1.1)，实际渲染宽度超过父容器，造成回流和滚动条闪现 - 移动端 Safari 对嵌套
transform的合成层管理更敏感，未显式启用硬件加速时抖动更明显
必须加 transform-style: preserve-3d
这是解决嵌套缩放抖动最常被忽略的一步。它告诉浏览器：这个容器及其子元素应共用同一个 3D 渲染上下文，避免因层级切换导致的合成中断。
- 仅对直接包含缩放子元素的父容器设置，不要全局加在
body上 - 配合
transform: translateZ(0)或will-change: transform使用效果更稳（注意：will-change应在 hover 前临时添加，动画结束移除） - 错误写法：
transform-style: flat（默认值，等同于没写）或写在子元素上（无效）
避免 width/height 与 scale 混用
嵌套结构里，如果子元素同时声明了 width: 200px 和 transform: scale(1.2)，其实际占用空间仍是 200px，但视觉尺寸变成 240px —— 这会导致兄弟元素布局错位，hover 切换时频繁重排。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transform: scale()控制尺寸变化，禁用所有width/height/margin动画 - 若需保持缩放后占位不变，给子元素加
transform-origin: center并包裹一层position: relative容器，再用overflow: hidden截断溢出 - 慎用
scaleX()或scaleY()单独缩放，容易放大父容器内边距计算误差
移动端要额外锁 viewport 和禁 text-size-adjust
iOS Safari 在缩放动画过程中可能偷偷触发字体重排，尤其当嵌套元素含文本且未锁定视口行为时，抖动会叠加放大。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">必须存在 - 对缩放容器加
text-size-adjust: none，防止双击或聚焦输入框时字体突然放大重排 - 避免用
rem或%配合scale做响应式尺寸——小数像素在不同 DPR 屏幕下取整不一致，逐帧动画时易出现“像素抖动”
真正起作用的不是“多加几个 transform 属性”，而是让每一层嵌套都明确自己的渲染角色：父容器负责隔离上下文，子元素只做视觉变换，且全程避开任何会触发 layout 的属性。一旦漏掉 transform-style 或混用 width，抖动就会在 Safari 或低端安卓机上立刻复现。
