图片hover放大抖动主因是scale以中心为原点缩放且父容器未设overflow:hidden或图片未居中；模糊因亚像素渲染，宜用scale(1.1)等分数倍值并配image-rendering；移动端需规避纯:hover，改用媒体查询或touch事件；动画卡顿多因未启用硬件加速，应仅过渡transform和opacity。
hover 放大图片时图片位置偏移或抖动
根本原因是 transform: scale() 默认以元素中心为原点缩放，而父容器没设 overflow: hidden 或图片本身没居中对齐，导致放大后边缘溢出、触发重排或相邻元素被挤开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片外层容器（如
<div>）加 <code>overflow: hidden，这是最简单有效的兜底 - 确保图片 display 是
block（默认 inline 会因基线留白，放大后更易抖动） - 如果用
img标签，建议同时设vertical-align: top或middle消除行内间隙 - 避免在父容器上直接 hover + scale，优先作用于
img自身，减少布局影响 - 优先用
scale(1.1)、scale(1.25)这类小幅度且分母为 2 或 4 的值，比scale(1.3)更稳 - 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（部分 Chrome/Firefox）缓解，但兼容性有限 - 真要高清，不如准备 @2x 图片 +
background-image配合background-size: contain，hover 时切换背景图，绕过 transform 渲染缺陷 - 别依赖纯
:hover做核心交互，至少配一个点击态（如加.zoomedclass + JS toggle） - 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，明确限定只给鼠标设备生效 - 若必须支持触屏缩放，改用
transform: scale()配合touchstart事件 + class 切换，而不是赌 hover - transition 必须只写
transform和opacity，例如：transition: transform 0.3s ease, opacity 0.3s ease - 给图片加
transform: translateZ(0)或will-change: transform（慎用，仅当真卡顿时加） - 避免同时 transition
transform和filter，后者常触发全量重绘 - 时间函数别用
ease-in-out做图片缩放，起步太慢；cubic-bezier(0.25, 0.46, 0.45, 0.94)更跟手
scale 放大后模糊或锯齿明显
浏览器对非整数倍缩放的渲染精度有限，尤其在 Chrome 和 Safari 中，scale(1.2) 这类非 2 的幂次值容易触发亚像素渲染问题，导致边缘发虚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
移动端 hover 不生效或响应延迟
绝大多数触摸设备没有 hover 概念，iOS Safari 和 Android Chrome 在“伪 hover”下要么不触发，要么等首次点击后才生效（模拟 hover），体验断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
transition 动画卡顿或闪一下再动
常见于没启用硬件加速，或过渡属性选错。比如对 width/height 做 transition 会强制重排，而 transform 本该走合成层，但若父元素有 will-change: auto 或层级混乱，也可能掉帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对那几行 CSS，而是得时刻想着：这个 scale 是在哪个坐标系里算的、父容器有没有形成 BFC、设备到底支不支持 hover、动画是不是真走 GPU——这些细节一漏，放大就变抽搐。
