transform触发GPU合成层导致亚像素渲染失效，文字发虚；需用Math.round()对齐整数像素，Chrome Layers面板标红即证实合成层生效。
因为 transform 把元素推入 GPU 合成层，而浏览器在合成时强制对齐整数像素，导致亚像素渲染失效——这不是 bug，是设计使然。
transform 触发了 GPU 合成层提升
只要用了 transform（哪怕只是 translate(0, 0)），Chrome / Edge 等 Chromium 内核浏览器就会默认把该元素及其子树提升为独立的复合层（Composited Layer）。文字一旦进入这个层，就脱离主渲染管线，不再享受 subpixel antialiasing（子像素抗锯齿）。
此时哪怕只偏移 0.3px，GPU 也会用双线性插值填充空隙，文字边缘立刻发虚。你在 Chrome DevTools 的 Layers 面板里看到文字区域标红并带 “Composited”，就是它了。
小数像素坐标是模糊的直接导火索
不是所有 transform 都会糊，但以下情况几乎必糊：
-
translate(-50%, -50%)：当元素宽高为奇数（如width: 301px），-50%就算出-150.5px -
scale(1.3)或scale(0.87)：缩放后字体线宽、间距变成非整数物理像素 -
rotate(7deg)：旋转矩阵计算出的小数位移被强制取整，破坏字符边缘对齐 -
getBoundingClientRect().top直接用于transform：该 API 返回值常含浮点误差（如102.734）
JS 动态设置 transform 时必须显式取整
别信“写死 translateY(100px) 就安全”——动态值大概率带小数，且浏览器不会自动帮你四舍五入。
- 用
Math.round()，不是parseInt()或Math.floor()：前者更符合视觉对齐直觉 - 避免
offsetTop、clientY等返回小数的 API；优先用getBoundingClientRect()+Math.round() - 滚动中实时更新？加
requestAnimationFrame节流，防止连续写入非整数坐标 - 示例：
el.style.transform = `translate(${Math.round(-w/2)}px, ${Math.round(-h/2)}px)`
移动端 Safari 特别苛刻
iOS Safari 对合成层文本渲染极其敏感：
-
-webkit-font-smoothing: subpixel-antialiased只在主文档层生效；若祖先已触发transform，这行声明直接失效 -
rotate()值必须是整数：transform: rotate(${Math.round(angle)}deg)，否则字体策略不触发 -
translateZ(0)单独加经常无效，它只是强化合成，不是修复手段
真正容易被忽略的是：模糊是否真实存在，得看 Layers 面板——没标红，就别瞎调 transform 参数；标红了，再检查矩阵第13/14位是不是小数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
