Dock图标hover放大变形抖动的根本原因是transform: scale()触发重排，需设容器宽高、图标display: block、transform-origin: center并加will-change: transform；Safari需-webkit-transform: translateZ(0)加速。
hover 放大时图标变形或抖动
根本原因是默认的 transform: scale() 会触发重排，如果父容器没有设置明确的 width 和 height，或者图标本身是内联元素（比如 <img> 或未设 display: block 的 <i>），悬停瞬间可能引发布局跳动。
- 给每个 Dock 图标容器（如
<div class="dock-item">）设固定宽高，例如width: 64px; height: 64px; - 图标元素统一设
display: block; margin: 0 auto;，避免内联对齐带来的基线偏移 - 放大必须用
transform: scale()，别用width/height动画——后者强制重排，卡顿明显 - 加
will-change: transform;到悬停前状态（非 hover 内），提前提示浏览器做图层提升
CSS transition 不生效或延迟明显
常见于没写全 transition 属性，或用了简写但漏掉 timing-function / duration，又或者被其他样式（比如父级 overflow: hidden）意外截断动画区域。
- 必须显式声明：
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);——苹果风格用这种缓出曲线，比ease-out更顺滑 - 别只写
transition: all 0.3s;，它会监听所有属性变化，拖慢性能且不可控 - Dock 容器外层要设
overflow: visible;，否则放大后超出部分会被裁剪，看起来像“没放大” - 确保 hover 触发的是同一 DOM 元素（比如不要 hover 父 div 却对子 icon 做 transform，中间隔了定位或 flex 布局容易失准）
图标放大中心点偏移，不是以自身为中心缩放
transform-origin 默认是 50% 50%，但若图标容器有 padding、border 或用了 flex 对齐，实际视觉中心可能偏移，导致放大时“甩出去”。
- 直接在图标元素上设
transform-origin: center center;，别依赖默认值 - 如果 Dock 是水平排列的 flex 容器，确保
.dock-item没有align-items或justify-content干扰单个项的盒模型 - 用 Chrome DevTools 的“Layout Shift Regions”调试，看放大前后是否触发 layout shift
- 避免在图标上同时用
transform: scale()和rotate()，复合变换需手动算 origin，容易错
在 Safari 上 hover 过渡卡顿或闪退
Safari 对 transform + transition 的硬件加速策略更保守，尤其当父元素有 filter、backdrop-filter 或透明度动画时，容易降级到软件渲染。
立即学习“前端免费学习笔记（深入）”；
- 给 Dock 容器加
-webkit-transform: translateZ(0);强制开启 GPU 加速（仅 Safari 需要） - 禁用
backdrop-filter: blur()在悬停期间——它和 scale 同时存在时，Safari 会频繁重建图层 - 不要用
opacity配合 hover 动画，改用rgba()控制背景色透明度，减少合成层压力 - 测试时打开 Safari 的 “Develop > Show Paint Rects”，看放大过程是否有大面积重绘（红色闪烁）
-webkit- 的补丁——漏一个，用户手指一划就感觉“不是那个味儿”。 
