<分区>
CSS 缩放文本使其模糊，如何使其看起来正常？
我有这个元素，点击时有一个缩放动画，当动画发生时，文本变得太模糊，然后恢复到它的正常外观，看起来字体大小改变了，但那是没有发生，这是在缩放时添加到文本中的极端模糊。
在过渡结束时检查文本如何“失去”模糊度。它确实看起来很糟糕。
我尝试添加这些 CSS 属性:
backface-visibility: hidden;
transform: translateZ(0);
到包含文本 (.content) 的 div，但它在 Chrome 上让事情变得更糟......似乎无法消除模糊。
有什么可以通过 CSS 解决这个问题的吗？或者我应该尝试 Javascript 解决方案吗？
看起来很糟糕最佳答案
据我所知，这是 Chrome 中的一个已知问题，与 float 中的舍入问题有关。如果您对具有明确定义的边缘的元素执行任何转换，并且它们的边缘被转换为不均匀的像素偏移，这就是结果。唯一的解决办法是确保定位始终是圆的。
这个问题也可以通过在 div 中使用具有 position: absolute; 属性的谷歌字体来重现。上:50%，左:50%，变换(-50%，-50%)；
如需进一步引用，您还可以查看此相关帖子: Blurry text after using CSS transform: scale(); in Chrome
关于CSS 缩放文本使其模糊，如何使其看起来正常？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59565661/