Chrome下transform字体模糊本质是GPU亚像素插值问题，需用整数位移、偶数宽高、0.25倍缩放等策略干预，禁用百分比translate和混合filter。
Chrome 下 transform 引发字体模糊，本质是 GPU 合成时的亚像素插值问题，不是 bug，但必须干预。纯加 will-change: transform 或 backface-visibility: hidden 基本无效，甚至可能加重。
为什么 translate(-50%, -50%) 在 Chrome 里特别容易糊
Chrome 对百分比位移的像素换算非常“诚实”：元素宽 301px → translateX(-50%) = -150.5px。这个 .5px 就会触发双线性插值，文字边缘直接软化。iOS Safari 同理，但 Chrome（尤其旧版）对 subpixel 的容忍度更低。
- 只要元素宽/高为奇数，
translate(-50%, -50%)几乎必糊 - 哪怕只加了
scale(1.01)或rotate(0.1deg)，也会让整个图层进入插值通道 -
font-smoothing: antialiased在 Chrome 中对 transform 后的文本基本不起作用
用 absolute + 整数 translate 替代百分比居中
这是最稳定、无需 JS 也能手动控制的方案：让 top: 50% 和 left: 50% 落在浏览器更保守的整数舍入点上，再用 transform: translate() 做整数级微调。
- 给弹窗设
position: absolute; top: 50%; left: 50% - 禁用
transform: translate(-50%, -50%)，改用transform: translate(-150px, -100px)（假设宽 300px、高 200px） - 若宽高动态，用 JS 计算并写入：
el.style.transform = `translate(${Math.round(-w/2)}px, ${Math.round(-h/2)}px)` - 务必确保宽高是偶数——CSS 中可强制设
width: calc(100% - 100% % 2)（不推荐），更稳妥的是 JS 检查后修正
缩放/旋转场景下避开模糊的关键参数
Chrome 对非整数缩放和小角度旋转极其敏感，scale(1.2) 和 rotate(3deg) 是高频模糊源。
- 缩放优先用
scale(1)、scale(1.25)、scale(0.75)这类 0.25 倍数，避开 1.1～1.9 区间 - 旋转尽量走
rotate(90deg)、rotate(180deg)；非 90° 倍数时，加image-rendering: pixelated（仅对图标有效） - 绝对不要同时用
transform和filter: drop-shadow()，二者叠加大概率触发渲染降级 - 慎用
will-change: transform—— Chrome 会提前建合成层，但若后续没真正执行 transform，反而增加模糊风险
flex + fixed 遮罩层是最彻底的绕过方案
如果你能接受结构微调，这是目前唯一完全规避 transform 渲染路径的方式，且天然兼容键盘弹出重定位。
- 遮罩层设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center - 弹窗作为其**直接子元素**，禁用
position: absolute和所有transform - 删掉所有
backface-visibility: hidden—— iOS Safari 下它会让文字变软 - 移动端监听
resize事件（不是scroll）来适配键盘弹出后的视口变化
真正难处理的不是“怎么让它不糊”，而是“怎么让糊了之后还能被发现”。很多模糊只出现在特定设备 DPI + 特定 Chrome 版本 + 特定缩放比例组合下，上线前必须真机连 Chrome DevTools 的 Rendering 面板，勾选 “Paint flashing” 和 “FPS meter”，拖动检查文字区域是否频繁重绘或出现半透明毛边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
