文字模糊不是transform本身的问题，而是它把元素推进了gpu合成层又未整数对齐——修复核心是整数对齐+避开合成污染；chrome将带transform元素升至独立合成层，文字被抽离主渲染管线，0.3px偏移即触发双线性插值发虚，getcomputedstyle(el).transform矩阵第13/14位为小数即失准，同级top清晰而transform模糊即锁定合成层与亚像素共同作用。
直接结论：文字模糊不是transform本身的问题，而是它把元素推进了GPU合成层，又没让坐标“踩准像素格子”——修复核心是**整数对齐 + 避开合成污染**。
为什么transform一加文字就糊？
Chrome把带transform的元素默认升到独立合成层（Layers面板标红即确认），文字从主渲染管线被抽出来，当成GPU纹理处理。此时哪怕只偏移0.3px，也会触发双线性插值，边缘立刻发虚。
-
getComputedStyle(el).transform返回的矩阵中，第13/14位（x/y偏移）若为小数，说明坐标已失准 - 同级用
top: 20px清晰，但transform: translateY(10px)就糊，基本锁定是合成层+亚像素共同作用 - 模糊在
dpr = 1（普通屏）下最明显，Retina屏因物理像素多，常掩盖问题
JS动态控制transform时怎么避免小数？
别信“写死translateX(-100px)就行”，JS计算出的值大概率含浮点误差。关键是在赋值前强制取整。
- 必须用
Math.round()，不是parseInt()或拼字符串 - 避免用
offsetTop、clientY直接驱动——它们返回值常带小数；优先用getBoundingClientRect()+Math.round() - 滚动中实时更新时，加
requestAnimationFrame节流，防止连续写入非整数坐标
移动端Safari和Chrome滤镜场景怎么保文字清晰？
iOS Safari对合成层字体渲染极其敏感；而filter（如blur）会连坐子元素进同一合成上下文，糊得更顽固。
- 必须加
-webkit-font-smoothing: subpixel-antialiased，但只对主文档层有效；若祖先已有transform，这行就失效 -
rotate()值必须是整数：transform: rotate(${Math.round(angle)}deg)，否则-webkit-font-smoothing不触发 - 别把文字放在
filter容器内——错误写法：<div class="glass"><h2>标题</h2></div>；正确做法：用伪元素承载模糊，让文字脱离该层
最容易被忽略的一点：没在Layers面板看到“Composited”标记，说明根本没进GPU渲染流程，此时加will-change或translateZ(0)不仅无效，反而增加开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
