文字模糊源于transform导致非整数像素偏移，触发浏览器子像素渲染降级；解决关键是确保最终渲染坐标为整数像素，而非禁用transform。
直接说结论：文字模糊不是 transform 本身的问题，而是它把元素推到了非整数像素位置，触发了浏览器的子像素渲染降级。解决的关键不是“禁用 transform”，而是让最终渲染坐标落在整数像素上。
为什么 translate(-50%, -50%) 会让文字变糊
浏览器对文本做亚像素渲染的前提是：元素在屏幕上的最终位置（尤其是 top/left）必须能精确对齐物理像素。而 transform: translate(-50%, -50%) 的计算结果常含小数——比如父容器高 475px，top: 50% 是 237.5px，再 translateY(-50%) 又减去自身高的一半，最终 y 坐标极大概率是 xxx.5px。Chrome（尤其 dpr=1 屏幕）会强制舍入或插值，导致抗锯齿失效。
常见表现：
- 文字边缘发虚、有灰边，放大后呈阶梯状
- 仅在 Chromium 内核（Chrome / Edge）明显，Safari / Firefox 相对不敏感
- 元素高度为奇数时更容易复现，但偶数也不绝对安全（取决于缩放比和 DPR）
避免非整数像素偏移的实操办法
核心思路：绕过百分比计算，改用整数 px 偏移，或确保最终 offset 是整数。
-
transform: translate3d(-50%, -50%, 0)不能解决模糊，只可能缓解抖动；它仍走 GPU 渲染路径，未改变坐标精度问题 - 把
translate(-50%, -50%)换成translate(calc(-50% + 0.5px), calc(-50% + 0.5px))—— 这种“补偿”不可靠，不同设备舍入策略不同 - 更稳妥的做法：用
top: calc(50% - 50px)+left: calc(50% - 50px)（假设宽高固定为 100px），彻底避开百分比参与 offset 计算 - 若高度自适应，优先改用
display: flex+align-items: center+justify-content: center，flex 的居中不依赖 transform，天然规避该问题
不得已必须用 transform 时的兜底策略
当 DOM 结构或框架限制无法换 layout 方式（比如 modal 覆盖层必须 absolute + transform），可尝试以下组合手段：
- 加
backface-visibility: hidden：强制创建独立合成层，有时能稳定渲染路径 - 加
-webkit-font-smoothing: subpixel-antialiased：仅对 macOS Chrome 有效，且新版已逐渐弃用 - 加
will-change: transform前先确认：它会提前提升图层，反而可能加剧模糊；建议仅在动画开始前动态添加，动画结束立即移除 - 对文字容器单独加
transform: translateZ(0)：有时能重置其子元素的渲染上下文，但效果不稳定，需实测
最易被忽略的点：模糊是否只发生在特定 DPR 下？用 Chrome DevTools 的 Layers 面板检查该元素是否被提升为独立图层，再对比 dpr=1 和 dpr=2 设备的表现——很多所谓“模糊”其实是 dpr=1 屏幕下亚像素渲染失效的固有行为，而非代码缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
