模糊根源是最终渲染坐标非整数物理像素，导致GPU插值模糊；解决路径只有强制像素对齐（如calc/Math.round）或避免合成层（如改用margin/position）。
直接改 transform 的负值为偶数像素，不能解决文字模糊——模糊根源不是正负号或奇偶性，而是非整数像素坐标与合成层渲染机制的冲突。
为什么“改为偶数像素”是误导性操作
网上流传的“元素宽高设为偶数就能防模糊”或“translate(-50%, -50%) 改成 translate(-100px, -200px) 就清晰”，本质混淆了现象与原因。实际测试表明：
-
transform: translateX(-1.5px)和translateX(-2px)都可能模糊，关键在是否落在整数像素上，而非正负或奇偶 - 若视口缩放为 110% 或设备 DPR=2，-2px 在物理像素中仍可能是小数（如 2.2px）
- 用
calc()或 JS 动态计算出的 “-100px” 若源自百分比/视口单位，本身已含浮点误差，硬写死数字只是掩盖问题
真正起作用的是像素对齐，不是数值类型
模糊触发条件是：**最终渲染坐标 ≠ 整数物理像素**。浏览器无法对亚像素位置做矢量级文字渲染，只能插值——这是硬件加速的必然代价。可行路径只有两条：
- 让变换结果强制落整：
transform: translateX(calc(50vw - 50%))比translateX(-50%)更可靠，因 calc 在 CSS 计算阶段就尝试对齐视口像素 - JS 控制时必须四舍五入：
el.style.transform = `translateY(${Math.round(y)}px)`，不能只靠 CSS 写死一个“看起来是整数”的值 - 避免混合定位：不要同时写
top: 20px和transform: translateY(10px)，浏览器无法合并图层，易触发重绘+模糊叠加
移动端 Safari 特别要注意字体渲染降级
iOS Safari 对 subpixel rendering 极其敏感，仅靠 translateZ(0) 常无效。必须叠加：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-font-smoothing: subpixel-antialiased（仅对主文档层生效） -
text-rendering: optimizeLegibility（辅助浏览器选择更优字形 hinting） - 若仍模糊，优先放弃 transform 居中，改用
position: fixed; top: 50%; left: 50%; margin: -Apx -Bpx;—— 这种方式不触发合成层，保留子像素渲染能力
最常被忽略的一点：模糊是否真实存在，得看 Chrome DevTools 的 Layers 面板。没看到 “Composited” 标记，说明根本没进 GPU 渲染流程，此时加 will-change 或 translateZ(0) 不仅无效，反而引入额外开销。
