文字发虚本质是GPU渲染时默认采用低质量双线性插值算法；常见于transform scale/3D变换触发合成层但未显式启用高质量重采样，尤其在Flex子项、非整数缩放比及高DPR场景下。
transform动画触发GPU加速但没真正启用
文字发虚的本质是浏览器把元素交由GPU渲染时，用了低质量的缩放插值算法。这不是bug，而是默认行为——当元素被transform（尤其是scale）影响时，浏览器会创建一个合成层（compositing layer），但如果没显式提示它“请用高质量重采样”，就可能沿用快速但模糊的双线性插值。
常见触发场景：用scale(1.02)做悬停放大、用translateZ(0)强行提层、或在Flex容器里对子项做rotateY 3D变换后又缩放。
-
transform: scale(1.05)单独写，不加其他修饰，大概率发虚 - 父容器设了
will-change: transform但没配backface-visibility: hidden，也可能加剧模糊 - Chrome 120+ 和 Safari 17+ 对
image-rendering支持更细，但该属性对文字无效，别乱试
Flex子项的transform和字体渲染层冲突
Flex布局本身不干预渲染层，但子元素一旦被transform作用，就会脱离文档流的文本绘制上下文。此时，如果该子元素内部有未包裹的纯文本，或含line-height/font-size动态计算的段落，浏览器可能在合成层里错误地对字体做亚像素重采样，尤其在非整数缩放比下（比如scale(1.03)）。
这不是Flex特有，但在Flex中更易暴露：因为Flex子项常被设为flex: 1或min-width: 0，导致内部文本盒尺寸频繁微调，叠加transform后，渲染管线更容易丢帧或降质。
立即学习“前端免费学习笔记（深入）”；
- 避免对含文本的块级子元素直接
transform: scale()，改用transform: translateZ(0)+ 独立scale()wrapper - 给子元素加
backface-visibility: hidden，强制启用高精度纹理缓存 - 若必须缩放文字，优先用
font-size配合transition，而非transform: scale()
硬件加速开启但分辨率适配没跟上
现代浏览器对transform启用GPU加速的前提是：该元素被判定为“适合合成”。而Flex子项若宽高由内容撑开（如width: max-content）、或父容器用了flex-wrap: wrap且视口缩放非100%，就可能导致合成层的像素边界与设备像素比（dpr）错位——结果就是文字边缘出现半透明像素，看着像虚。
这个问题在Retina屏、Windows缩放125%/150%、以及iOS Safari横竖屏切换时高频出现。
- 检查是否用了
transform: scale(1.05) translateZ(0)这种组合：translateZ(0)提层，scale放大，但两者叠加后dpr映射失效 - 临时验证方式：在DevTools里勾选
Rendering → Paint flashing，看文字区域是否闪烁异常 - 稳妥解法：用
transform: scale(1.05)+transform-origin: center+ 显式设置子元素width和height（哪怕用fit-content）
最常被忽略的是：发虚往往只在特定DPR或缩放比例下出现，本地开发看着正常，上线后用户反馈“字糊了”。别急着换方案，先用backface-visibility: hidden和固定宽高兜底，再针对性加image-rendering: -webkit-optimize-contrast（仅限WebKit内核）试探。真实项目里，宁可少一帧动画，也不能让用户读不清字。
