CSS: transform: translate(-50%,-50%) hace que los textos sean borrosos

css3 blurry

Question

Esta pregunta ya tiene una respuesta aquí:

• Post-animación de texto borroso / distorsionado basado en webkit a través de translate3d 17 respuestas

Quiero centrar mi div y uso este método, pero hace que mis textos dentro del div borrosos:

<!-- language: lang-css -->

#div {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

¿Hay alguna manera de centrar mi div ?

Answer 1

Agregue estos estilos alrededor de los bloques de elementos que está traduciendo para corregir el suavizado, traducir el eje Z para que tenga un valor cero.

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