文字模糊不是bug，是浏览器将transform元素推入gpu合成层后未对齐整数像素所致；核心解法是确保transform所有计算结果为整数像素值，如用math.round()处理动态值、避免奇数尺寸与百分比组合、优先使用整数缩放和90°倍数旋转。
文字模糊不是 bug，是浏览器把用了 transform 的元素推到 GPU 合成层后，又没让它“踩准像素格子”造成的。核心解法就一条：确保所有 transform 计算结果为整数像素值，而不是靠肉眼判断“差不多”。
为什么 translate(-50%, -50%) 居中会糊文字
它依赖元素宽高做百分比换算，而实际渲染时 50% 往往算出小数——比如宽度是 301px，translateX(-50%) 就是 -150.5px。GPU 对这种亚像素位移必须双线性插值，文字边缘立刻发虚。
- 只要元素宽/高为奇数，
translate(-50%, -50%)几乎必出小数 - 父容器响应式变化时，模糊会忽有忽无，极难复现
-
transform: translateZ(0)或backface-visibility: hidden不解决根本问题，只是偶尔重置了渲染状态
JS 动态设置 transform 时如何保证整数像素
不能依赖浏览器自动舍入，也不能用 parseInt() 或字符串拼接。动态计算的坐标（如 offsetWidth / 2）大概率带浮点误差，必须在赋值前显式取整。
- 用
Math.round()，不是Math.floor()或parseInt()：前者四舍五入更符合视觉对齐直觉 - 避免直接用
offsetTop、clientY等返回小数的 API；优先用getBoundingClientRect()+Math.round() - 滚动中实时更新时，加
requestAnimationFrame节流，防止连续写入非整数坐标 - 示例：
el.style.transform = `translate(${Math.round(-w/2)}px, ${Math.round(-h/2)}px)`
哪些 transform 参数最危险
缩放和旋转比平移更容易破坏像素对齐，因为它们拉伸整个纹理，GPU 插值影响被放大。
- 危险参数：
scale(1.3)、rotate(7deg)、scale(0.87)——这些会让文字边缘落在亚像素位置 - 缩放优先用整数倍（
scale(1)、scale(2)）或 0.25 倍数（scale(1.25)、scale(0.75)） - 旋转尽量用 90° 倍数（
rotate(90deg)），非 90° 倍数时，rotate(${Math.round(angle)}deg)是底线 - 移动端 Safari 特别敏感：必须加
-webkit-font-smoothing: subpixel-antialiased，且rotate值必须为整数，否则该声明无效
什么时候该放弃 transform 改用传统定位
硬件加速有代价，静态场景优先选更稳的方案。强行加 transform 不仅模糊，还可能触发不必要的合成层，拖慢渲染。
- 居中应靠
display: flex+align-items/justify-content，而非额外加transform: translate(-50%, -50%) - 缩放需求不强时，优先考虑
font-size调整或容器尺寸控制，而非scale() -
will-change: transform和translateZ(0)慎用——它们会强化合成层行为，反而放大模糊；尤其当配合小数变换时，等于“提醒浏览器：请用最糙的方式渲染这个文字” - 最常被忽略的一点：模糊往往只在特定设备像素比（
window.devicePixelRatio === 1）下明显。开发时若只在高 DPI 屏（Mac、Android 高刷屏）测试，上线后普通屏用户就会看到发虚文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
