如何解决CSS transform导致字体发虚的问题？

字体发虚不是transform写错了，而是它将文字推至非整数像素位置触发GPU双线性插值；解决核心是确保translate、scale、rotate的最终值严格为整数像素，而非依赖translateZ(0)或will-change硬加速。

直接说结论：字体发虚不是 transform 写错了，而是它把文字推到了非整数像素位置，触发了 GPU 双线性插值——解决核心是让 translate、scale、rotate 的最终计算值严格落在整数物理像素上，而不是靠 translateZ(0) 或 will-change 硬加速。

为什么 translate(50%, -50%) 居中会发虚

百分比位移依赖容器尺寸，而容器宽高常为奇数（比如 301px），50% 就算出 150.5px。这个 .5 会让浏览器在渲染时做亚像素插值，文字边缘立刻变软。Chrome 和 Edge 尤其敏感，哪怕只差 0.1px 也糊。

实操建议：

1. 静态居中优先用 display: flex + justify-content/align-items，或 position: absolute + top: 50% + transform: translateY(-50%)，但确保父容器宽高是偶数
2. 必须用百分比时，先取 el.offsetWidth，再套 Math.round(value * window.devicePixelRatio) / window.devicePixelRatio 校准
3. DevTools 里临时删掉 transform，文字瞬间变锐利 → 基本锁定问题来源

JS 动态设置 transform 时怎么避免小数

浏览器不会自动对 getBoundingClientRect() 或动画插值结果取整，JS 层不干预，模糊就必然发生。

实操建议：

1. 所有坐标都包 Math.round()：element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`
2. 动画中每帧都要校验：哪怕起止点是整数，中间帧也可能产出 123.742px，需用 requestAnimationFrame + 取整兜底
3. 慎用 transform: scale(1.2) 这类浮点缩放；scale(1)、scale(2) 安全，scale(1.5) 已高风险

rotate 和 scale 怎么控制不糊

rotate(5deg) 或 scale(1.1) 看不出偏移，但它们一样会让文字纹理在 GPU 层重采样。一旦映射失配，就糊。

实操建议：

1. 旋转优先用 90deg、180deg 这类整数倍角度，避开小角度；rotate(7deg) 几乎必糊
2. 缩放尽量用整数比：font-size: 16px → scale(1.25) 得 20px，比 scale(1.23) 稳定得多
3. 避免组合写法：transform: scale(1.1) rotate(2deg) 会叠加误差，比单用更易糊

什么时候该放弃 transform 改用传统定位

硬件加速不是免费午餐。静态居中、固定缩放、无交互的偏移，完全没必要用 transform——它反而引入合成层和插值风险。

实操建议：

1. 纯居中场景，用 flex 或 grid；需要兼容老浏览器时，用 position: absolute + margin: auto
2. 缩放需求弱时，直接调 font-size 或容器 width/height，比 scale() 更稳
3. 别乱加 will-change: transform：动画开始前一刻设，最后一帧用 requestAnimationFrame 清除；否则图层驻留、内存涨、Safari 上反而更糊

最隐蔽的坑是：模糊不报错、不警告，只在特定 DPI、缩放比、浏览器版本下偶然出现。一旦依赖 translateZ(0) 这类“看起来有效”的权宜之计，后续在 iOS 或高分屏上大概率翻车。