应添加 transform: translatez(0) 触发 gpu 加速，避免毛边；transition 精准限定为 transform，时长选 .18s–.25s；scale 不改变文档流，需配合 z-index、overflow: hidden 或额外容器规避布局错位。
hover时元素突然放大，边缘模糊怎么办
直接写 transform: scale(1.05) 很容易让元素在放大瞬间出现毛边或字体发虚，尤其在 Chrome 和 Safari 下明显。这是因为浏览器默认没开启 GPU 加速，缩放时用的是 CPU 插值渲染。
- 必须加
transform: translateZ(0)或will-change: transform触发硬件加速 - 优先用
transform: scale(1.05) translateZ(0)，比will-change更可控、无副作用 - 别对
img或含 subpixel 文字的容器单独放大，会放大锯齿；可考虑对父容器做 scale，内部用backface-visibility: hidden降噪
CSS transition 该配哪些属性才不卡顿
只写 transition: all .2s ease 是最常见翻车点——它会监听所有可动画属性，哪怕你只动了 scale，浏览器也得反复重排重绘。
- 精准锁定：用
transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 时间别低于
.12s，太短人眼感知为“跳”，太长又拖沓；.18s–.25s是较稳区间 - 避免和
width/height同时过渡，这两者触发布局计算，和transform混用会强制降级到主线程渲染
scale 放大后文字溢出或布局错位
transform: scale() 只改变视觉呈现，不改变文档流尺寸。所以放大后的元素仍按原始大小占位，容易盖住兄弟元素，或让文字撑破容器。
- 如果要保持“占位同步放大”，得配合
transform-origin控制缩放中心（比如center），再用margin或padding手动预留空间 - 更稳妥的做法是：用
scale+z-index提升层级，同时给相邻元素加overflow: hidden防遮挡 - 绝对定位元素放大时不会影响其他元素，但要注意
top/left值是否需微调，否则视觉偏移明显
兼容老版本 Safari 或 iOS Webview 的坑
iOS 9.3–12.4 的 Webview 对 transform 的 scale 解析有偏差，尤其嵌套在 flex 容器里时，可能放大失效或错位。
- 必须加
-webkit-transform: scale(1.05)前缀，仅靠标准语法不够 - 避免在
display: flex的直接子元素上用 hover scale；可多包一层div，把 transform 写在内层 - 某些旧版 Safari 会忽略
transform-origin: center，显式写成transform-origin: 50% 50%更可靠
:focus-within 或键盘导航）是否还准确。scale 不影响可访问性树，但视觉位移会让屏幕阅读器用户困惑——这点调试时很少有人真去键盘 tab 测试。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
