文字模糊主因是transform触发gpu双线性插值，非整数像素值（如translate(50%,-50%)在奇数宽高容器中得150.5px）导致亚像素渲染；须用math.round()约束js计算值、避免百分比居中、优先整数scale/rotate，并通过layers面板确认是否真进入合成层。
文字模糊不是 transform 写错了，而是浏览器把元素送进 GPU 合成层后，对非整数像素位置做了双线性插值——只要最终生效的 translate、scale 或 rotate 值含小数，就大概率发虚。
为什么 translate(50%, -50%) 居中会模糊
百分比计算依赖容器尺寸，而容器宽高可能是奇数（比如 301px），50% 就算出 150.5px，触发亚像素渲染。Chrome 和 Edge 对这类小数位移尤其敏感，文字边缘立刻变软。
- DevTools 中临时删掉
transform，文字瞬间变锐利 → 基本锁定问题来源 - 同级未加
transform的文字依然清晰 → 说明不是全局字体设置或显示器问题 - 模糊只出现在变换元素上，且常伴随轻微抖动或错位 → 是像素未对齐的典型表现
JS 动态设置 transform 时怎么避免小数
别直接拼接浮点计算结果，浏览器不会自动取整。必须在 JS 层主动做整数约束，否则动画帧之间也会因舍入误差累积模糊。
- 用
Math.round()包裹所有坐标：element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - 避免
getBoundingClientRect()后直接运算：它返回浮点值，需先Math.floor()或Math.round() - 动画中每帧都校验：哪怕起始/终点是整数，中间插值也可能产出小数，建议用
requestAnimationFrame+ 取整逻辑兜底
scale() 和 rotate() 怎么控制不模糊
scale(1.2) 或 rotate(7deg) 不像 translate 那样直观可见偏移，但它们同样会让文字纹理在 GPU 层重采样，一旦缩放因子或角度导致像素映射失配，就模糊。
-
scale(1)、scale(2)安全；scale(1.5)已高风险 - 小角度旋转慎用：
rotate(90deg)、rotate(180deg)对齐像素网格，rotate(5deg)几乎必糊 - 避免组合写法：
transform: scale(1.1) rotate(2deg)会叠加误差，比单用更易糊
什么时候该放弃 transform 改用传统定位
硬件加速不是免费午餐。静态居中、固定缩放、无交互的偏移，完全没必要用 transform——它反而引入合成层和插值风险。
- 居中优先用
display: flex+align-items/justify-content，或position: absolute+top/left配合margin - 缩放需求弱时，直接调
font-size或容器width/height，比scale()更稳 - 别乱加
will-change: transform或translateZ(0)：它们会强化合成行为，等于告诉浏览器“请用最糙的方式渲染这个文字”
最容易被忽略的一点是：模糊是否真实存在，得看 Chrome DevTools 的 Layers 面板。没看到 “Composited” 标记，说明根本没进 GPU 渲染流程，此时加任何优化属性不仅无效，反而引入额外开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
