hover放大抖动因scale默认以左上角为原点，应设transform-origin: center并配合overflow: hidden；文字模糊可加will-change: transform、translatez(0)及选用整数缩放比。
hover放大时元素会“抖动”或位置偏移
这是因为transform: scale()默认以元素左上角为原点缩放，放大后右下部分会挤占其他元素空间，导致布局重排。解决办法是统一设置缩放原点：transform-origin: center。同时建议配合overflow: hidden在父容器上，避免放大后内容溢出破坏布局。
放大后文字模糊或边缘发虚
这是浏览器对非整数像素缩放的渲染问题，尤其在 Chrome 和 Safari 中明显。可尝试以下组合修复：
- 给目标元素添加
will-change: transform，提前通知浏览器该元素将变换 - 启用硬件加速：在
transform值末尾加translateZ(0)，例如transform: scale(1.2) translateZ(0) - 避免使用小数倍数（如
scale(1.15)），优先选scale(1.2)或scale(1.25)等更易对齐像素的值
多个子元素一起放大但只想动某个部分
常见于卡片组件：悬停整个卡片，但只让图片放大、文字不动。关键在于不要对父容器直接设 :hover + scale，而是精准控制子元素：
.card {
/* 不在这里写 transform */
}
.card img {
transition: transform 0.3s ease;
}
.card:hover img {
transform: scale(1.15);
}
如果必须用父级 hover 触发，记得给其他子元素（如标题、描述）加 transform: none 或重置值，否则它们可能继承或受层叠影响。
移动端 hover 不生效或响应迟钝
触摸设备没有真正的 hover 状态，iOS Safari 和部分安卓浏览器会延迟触发或完全跳过 :hover。稳妥做法是：
- 用 JavaScript 补充监听
touchstart，动态加 class（如.is-hovered），再用 CSS 写.card.is-hovered img { transform: scale(1.15); } - 或改用
@media (hover: hover)做媒体查询隔离，确保仅在支持 hover 的设备上启用该效果 - 避免依赖 hover 实现核心功能，它本质是增强体验，不是交互主路径
真正难处理的是缩放与绝对定位、fixed 元素的组合——此时 transform 会创建新层叠上下文，可能遮挡或错位。遇到这类情况，得先检查 z-index 层级是否被意外重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
