CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]

Answer 1

Add these styles around elements blocks which you are translating to fix the anti-aliasing, Translate Z-axis to have a zero value.

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);