CSS缩放文本使其模糊，如何使其看起来正常？

Question

我有一个元素，单击时具有缩放动画，动画进行时，文本变得太模糊，然后返回到其正常外观，看起来像是字体大小的变化，但这不是发生这种情况时，缩放时会在文本中添加极端的模糊性。

在过渡结束时检查文本如何“失去”模糊度。它确实看起来很糟。

我尝试添加这些CSS属性：

backface-visibility: hidden;
transform: translateZ(0);

到包含文本（.content）的div，但会使Chrome上的情况更糟...似乎无法消除模糊性。

有什么可以通过CSS修复的东西吗？还是应该尝试使用Javascript解决方案？

看起来不好

Answer 1

据我所知，这是Chrome中的一个已知问题，与浮点数中的舍入问题有关。如果在具有明确定义的边的元素上执行任何transform，且它们的边为transformed至uneven pixel offsets，则结果为。唯一的解决方案是确保定位始终是圆形的。