文字模糊的根本原因是元素被推入gpu合成层并失准像素坐标，修复需清除合成层污染源并强制整数对齐。chrome layers面板标红即确认问题，getcomputedstyle(el).transform矩阵第13/14位为小数说明坐标失准，同级top清晰而transform模糊即锁定合成层+亚像素共同作用；js中须用math.round()取整后再赋值transform，避免offsettop等含小数的api，移动端safari需配合-webkit-font-smoothing: subpixel-antialiased且rotate值必须为整数，未标“composited”时加will-change反而增加开销。
文字模糊不是定位方式本身的问题，而是浏览器把元素推进了GPU合成层，又没让它“踩准像素格子”——position: fixed、transform、opacity这些属性只是触发条件，真正要动的是坐标精度和图层策略。
为什么删掉 transform 文字就变清晰了？
因为 transform 默认触发合成层提升，文字从主渲染管线移入GPU纹理，失去亚像素渲染能力。此时哪怕只偏移 0.3px，GPU也会用双线性插值平滑边缘，发虚立刻出现。
- 在 Chrome DevTools 的 Layers 面板里看到文字区域标红并带 “Composited”，就是它了
-
getComputedStyle(el).transform返回的矩阵中，第13/14位（x/y偏移）若为小数，说明坐标已失准 - 同级用
top: 20px清晰，但加了transform: translateY(10px)就糊，基本锁定是合成层+亚像素共同作用
JS 控制 transform 时怎么避免小数偏移？
别信“写死 translateX(-100px) 就行”，动态计算出的值大概率含浮点误差。关键是在赋值前强制取整。
-
el.style.transform = `translateY(${Math.round(y)}px)`—— 必须用Math.round()，不是parseInt()或四舍五入后拼字符串 - 避免用
offsetTop、clientY直接驱动，它们返回值常带小数；优先用getBoundingClientRect()+Math.round() - 滚动中实时更新时，加
requestAnimationFrame节流，防止连续写入非整数坐标
移动端 Safari 模糊特别难搞怎么办？
iOS Safari 对合成层字体渲染极其敏感，translateZ(0) 单独用经常无效，必须叠加字体策略且仅在整数角度下生效。
- 必须加
-webkit-font-smoothing: subpixel-antialiased，但只对主文档层有效；若元素已被祖先的transform连坐进合成层，这行就失效 -
rotate()值必须是整数：transform: rotate(${Math.round(angle)}deg)，否则-webkit-font-smoothing不触发 - 慎用
scale()：scale(1.5)会让 1px 字体线宽变成 1.5 物理像素，直接触发插值；优先用整数缩放如scale(2)或改用font-size调整
最常被忽略的一点：模糊是否真实存在，得看 Layers 面板。没看到 “Composited” 标记，说明根本没进 GPU 渲染流程，此时加 will-change 或 translateZ(0) 不仅无效，反而引入额外开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
