文字模糊是浏览器对非整数像素transform的亚像素插值所致，因提升至gpu合成层后文本被当位图处理，触发双线性插值；解决需确保transform值为整数，优先用传统定位替代非必要transform。
文字模糊不是 bug，是浏览器对非整数像素变换的渲染妥协——只要 transform 计算结果含小数，就大概率触发亚像素插值，尤其在 Chrome 和 Edge 中明显。
为什么 translate() 和 scale() 会让文字变虚
根本原因是浏览器把应用了 transform 的元素提升到独立合成层（GPU 层），此时文本不再走原生子像素渲染路径，而是被当作位图纹理处理。一旦位移、缩放或旋转值不是整数（比如 translate(50%, 0) 在奇数宽度容器里算出 100.5px），GPU 就必须做双线性插值，边缘自然发虚。
- 典型诱因：
translate(50%, -50%)居中、scale(1.3)、rotate(7deg)、JS 动态计算未取整 - 验证方法：DevTools 里临时删掉元素所有
transform声明，文字立刻变锐利 → 基本锁定问题来源 - 注意：模糊只出现在变换元素上，同级普通定位文字清晰，说明不是字体或抗锯齿全局设置问题
强制整数像素偏移的三种实操方式
核心是让最终生效的 transform 值始终为整数，不依赖浏览器自动舍入。
- JS 动态设置时，用
Math.round()或Math.floor()包裹计算值：element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - CSS 中避免直接用百分比或视口单位驱动
translate()，改用calc()拆解：transform: translate(calc(50% - 200px), 0)比translate(50%, 0)更可控 - 动画关键帧里显式写整数：
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }，别用translateX(100%)
什么时候该放弃 transform 改用传统定位
不是所有居中或偏移都需要 transform。硬件加速有代价，静态场景优先选更稳的方案。
- 弹窗、Tooltip、下拉菜单等静态组件：用
position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -24px;替代transform: translate(-50%, -50%) - Flex/Grid 子项内文字模糊：先检查是否误加了多余
transform；居中应靠justify-content/align-items，而非额外加transform - 缩放需求不强时，优先考虑
font-size调整或容器尺寸控制，而非scale()
慎用 will-change 和 translateZ(0) 加速
它们会强化合成层行为，反而放大模糊——尤其当配合小数变换时，等于“提醒浏览器：请用最糙的方式渲染这个文字”。
-
will-change: transform只应在真正频繁动画的元素上启用，且需配合整数变换值 -
transform: translateZ(0)确实能触发分层，但若没解决像素对齐，只是把模糊从 CPU 渲染搬到 GPU 渲染 - 真要优化性能，先确保变换值整数化，再考虑是否加
translateZ(0)；多数静态 UI 完全不需要它
最容易被忽略的是：模糊往往不是单一属性导致，而是 transform + will-change + 小数计算 + 高 DPI 屏幕共同作用的结果。调试时得一层层关掉变量，而不是一上来就堆 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
