图片hover放大跳动主因是行内元素基线空白，Safari闪烁因transform未启GPU加速，锚点偏移因transform-origin受父容器影响，移动端hover无效需媒体查询隔离。
hover 放大图片时页面元素跳动
根本原因是图片默认是行内元素，有基线对齐带来的底部空白。放大后这个空白被拉伸，视觉上像“跳了一下”。
- 给图片加
display: block或vertical-align: top - 容器（比如
<div>）别用inline-block包裹，改用block或设font-size: 0 - 如果必须保留行内上下文，优先选
vertical-align: middle而不是默认的baseline
transform: scale() 在 Safari 上闪一下
Safari 对未触发硬件加速的 transform 动画渲染不稳定，尤其从 1 开始缩放时容易抽帧或闪烁。
- 强制开启 GPU 加速：加
transform: translateZ(0)或will-change: transform - 别写成
transform: scale(1.2)单独一条，改成transform: scale(1.2) translateZ(0) -
will-change别滥用——只加在 hover 触发的元素上，比如img:hover { will-change: transform; }
放大中心点偏移，不是以图片中心为轴
transform-origin 默认是 50% 50%，但若父容器有 padding、border 或图片被裁剪（object-fit: cover），实际缩放锚点会偏移。
- 显式重置锚点：
transform-origin: center或transform-origin: 50% 50% - 如果图片在
flex容器里，确认没被align-items或justify-content挤偏位置 - 用浏览器开发者工具检查 computed styles，看
transform-origin真实值是不是被继承或覆盖了
移动端 hover 不生效还误触
手机端没有真正意义上的 hover，iOS 和部分安卓浏览器会模拟一次点击来“触发” hover，导致放大一闪而过，甚至干扰点击逻辑。
立即学习“前端免费学习笔记（深入）”；
- 加媒体查询隔离：
@media (hover: hover) and (pointer: fine) { img:hover { transform: scale(1.2); } } - 别依赖纯
:hover做关键交互——比如图库预览，改用click+ JS 切换 class 更可靠 - 如果必须支持，加
touch-action: manipulation减少延迟，但不能解决根本问题
最麻烦的是混合场景：既要兼容老 Safari，又要防移动端误触发，还得处理 flex/Grid 布局下的锚点漂移。这时候宁可多写几行 CSS，也别指望一个 scale(1.2) 通吃所有设备和布局。
