Texto borroso después de usar CSS transform: scale (); en cromo

Parece que ha habido una actualización reciente de Google Chrome que causa texto borroso después de hacer una transform: scale(). Específicamente estoy haciendo esto:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Si visita http://rourkery.com en Chrome, debería ver el problema en el área de texto principal. No solía hacer esto y no parece afectar a otros navegadores webkit (como Safari). Hubo algunas otras publicaciones sobre personas que experimentan un problema similar con las transformaciones 3d, pero no pueden encontrar nada sobre las transformaciones 2d como esta.

Cualquier idea sería apreciada, gracias!

He tenido este problema varias veces y parece haber 2 formas de solucionarlo (se muestra a continuación). Puede usar cualquiera de estas propiedades para arreglar el renderizado, o ambas al mismo tiempo.

La visibilidad oculta de la parte posterior soluciona el problema, ya que simplifica la animación solo al frente del objeto, mientras que el estado predeterminado es el frente y la parte posterior.

backface-visibility: hidden;

TranslateZ también funciona, ya que es un truco para agregar aceleración de hardware a la animación.

transform: translateZ(0);

Ambas propiedades solucionan el problema que tienes, pero a algunas personas también les gusta agregar

-webkit-font-smoothing: subpixel-antialiased;

a sus animados a objetar. Me parece que puede cambiar la representación de una fuente web, pero siéntase libre de experimentar con ese método también.

Para mejorar el desenfoque, esp. en Chrome, intente hacer esto:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

ACTUALIZACIÓN: la perspectiva agrega distancia entre el usuario y el plano z, que técnicamente escala el objeto, haciendo que la falta de definición parezca 'permanente'. Lo perspective(1px)anterior es como una cinta de pato porque estamos igualando el desenfoque que estamos tratando de resolver. Es posible que tenga mejor suerte con el CSS a continuación:

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

Descubrí que ajustar la relación de escala ayudó un poco.

El uso de scale(1.048)over (1.05)pareció generar una mejor aproximación al tamaño de fuente de un píxel completo, reduciendo el desenfoque de subpíxeles.

También usé lo translateZ(0)que parece ajustar el paso de redondeo final de Chrome en la animación de transformación. Esta es una ventaja para mi uso en vuelo porque aumenta la velocidad y reduce el ruido visual. Sin embargo, para una función onclick, no la usaría porque la fuente transformada no parece ser tan crujiente.

Después de probar todo lo demás aquí sin suerte, lo que finalmente solucionó este problema para mí fue eliminar la will-change: transform;propiedad. Por alguna razón, causó una escala de aspecto terriblemente borrosa en Chrome, pero no en Firefox.

En vez de

transform: scale(1.5);

utilizando

zoom : 150%;

corrige el problema de borrosidad del texto en Chrome.

Esto debe ser un error con Chrome (versión 56.0.2924.87), pero a continuación se soluciona el desenfoque cuando cambio las propiedades de CSS en la consola ('. 0'). Lo reportaré.

filter: blur(.0px)

Sunderls me lleva a la respuesta. Excepto filter: scaleque no existe, pero filter: blurexiste.

Aplique las siguientes declaraciones a los elementos que aparecen borrosos (en mi caso, estaban dentro de un elemento transformado):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Funcionó casi a la perfección. " Casi " porque estoy usando una transición y mientras estoy en transición, los elementos no se ven perfectos, pero una vez que se hace la transición, lo hacen.

Descubrí que el problema se produce en transformaciones relativas de cualquier manera. translateX (50%), escala (1.1) o lo que sea. proporcionar valores absolutos siempre funciona (no produce texto borroso (ures)).

Ninguna de las soluciones mencionadas aquí funcionó, y creo que todavía no hay una solución (usando Chrome 62.0.3202.94 mientras escribo esto).

En mi caso transform: translateY(-50%) translateX(-50%)provoca el desenfoque (quiero centrar un diálogo).

Para alcanzar un poco más de valores "absolutos", tuve que establecer valores decimales en transform: translateY(-50.09%) translateX(-50.09%).

NOTA

Estoy bastante seguro de que estos valores varían en diferentes tamaños de pantalla. Solo quería compartir mis experiencias, en caso de que ayude a alguien.

He encontrado una solución mucho mejor y limpia:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

o

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Gracias a esta publicación: Prevención de renderizado borroso con transform: scale

Agregar perspective(1px)funcionó para mí.

transform: scale(1.005);

a

transform: scale(1.005) perspective(1px);

Intente usar zoom: 101%;para diseños complejos cuando no pueda usar una combinación de zoom + escala.

En mi caso, el siguiente código causó una fuente borrosa:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

y solo agregando la propiedad zoom me lo arregló. Jugar con zoom, lo siguiente funcionó para mí:

zoom: 97%;   

Otra solución para probar que acabo de encontrar para las transformaciones borrosas (translate3d, scaleX) en Chrome es establecer el elemento como " display: inline-table ;". Parece forzar el redondeo de píxeles en algún caso (en el eje X).

Leí que el posicionamiento de subpíxeles en Chrome estaba destinado y los desarrolladores no lo solucionarán.

Actualización de 2019
El error de visualización de Chrome todavía no se ha corregido y, aunque no es culpa de los usuarios, ninguna de las sugerencias ofrecidas en la totalidad de este sitio web ayuda a resolver el problema. Puedo estar de acuerdo en que he probado todos en vano: solo 1 se acerca y esa es la regla css: filter: blur (0); lo que elimina el desplazamiento de un contenedor en 1px pero no resuelve el error de visualización borrosa del contenedor en sí y cualquier contenido que pueda tener.

Aquí está la realidad: literalmente no hay solución para este problema, así que aquí hay una solución para sitios web fluidos

CASO
Actualmente estoy desarrollando un sitio web fluido y tengo 3 divs, todos centrados con efectos de desplazamiento y compartiendo valores de porcentaje tanto en ancho como en posición. El error de Chrome ocurre en el contenedor central que está configurado a la izquierda: 50%; y transformar: translateX (-50%); Un entorno común.

EJEMPLO: Primero el HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Aquí está el CSS donde se produce el error de Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Aquí está el CSS fijo ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Fiddle con errores: https://jsfiddle.net/m9bgrunx/2/
Fiddle fijo: https://jsfiddle.net/uoc6e2dm/2/

Como puede ver, una pequeña cantidad de ajustes al CSS debería reducir o eliminar el requisito de usar transform para el posicionamiento. Esto también podría aplicarse a sitios web de ancho fijo, así como a fluidos.

Yo tengo este mismo problema. Lo arreglé usando:

.element {
  display: table
}

Nada de lo anterior funcionó para mí. Tenía esta animación para ventanas emergentes:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

En mi caso, el efecto borroso desapareció después de aplicar esta regla: -webkit-perspective: 1000;a pesar de que está marcado como no utilizado en el inspector de Chrome.

Mi solución fue:

pantalla: inicial;

Luego fue crujiente

Nada de lo anterior funcionó para mí.

Funcionó cuando agregué perspectiva

es decir, de

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

cambié a

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Arreglé mi caso agregando:

transform: perspective(-1px)

PARA CHORME:

He intentado todas las sugerencias aquí. Pero no funcionó. Mi universidad encontró una gran solución, que funciona mejor:

NO debe escalar más allá de 1.0

E incluir translateZ(0)en el vuelo estacionario pero NO en la posición de no vuelo / inicial.

Ejemplo:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Usé una combinación de todas las respuestas y esto es lo que me funcionó al final:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Estaba enfrentando el problema del texto borroso en Chrome pero no en Firefox cuando lo usaba transform: translate(-50%,-50%).

Bueno, realmente probé muchas soluciones como:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Ninguno de estos me funcionó.

Finalmente, hice la altura y el ancho del elemento incluso. ¡Resolvió el problema para mí!

Nota: puede depender de un caso de uso a otro. Pero seguramente vale la pena intentarlo!

He intentado muchos ejemplos de estas respuestas, desafortunadamente nada ayuda para Chrome. Version 81.0.4044.138 He agregado al elemento transformador.

 transform-origin: 50% 50%;

éste

 transform-origin: 51% 51%;

me ayuda

Para mí, el problema era que mis elementos estaban usando transformStyle: preserve-3d. Me di cuenta de que esto no era realmente necesario para la aplicación y eliminarlo solucionó la falta de definición.

Eliminé esto de mi código transform-style: preserve-3d; y agregué estotransform: perspective(1px) translateZ(0);

¡la mancha desapareció!

En Chrome 74.0.3729.169, actual al 5-25-19, no parece haber ninguna solución para el desenfoque que ocurre en ciertos niveles de zoom del navegador causados ​​por la transformación. Incluso un simple TransformY(50px)borrará el elemento. Esto no ocurre en las versiones actuales de Firefox, Edge o Safari, y no parece ocurrir en todos los niveles de zoom.

Será difícil de resolver con solo css.

Entonces lo resolví con jquery.

Este es mi CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

y este es mi jquery

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Solo para agregar a la locura de reparación, poner {border: 1px solid # ???} alrededor del objeto que se ve mal me soluciona el problema. En caso de que tenga un color de fondo estable, considere esto también. Esto es tan tonto que nadie pensó en mencionar, supongo, eh eh.

Puedes usar CSS filterpara arreglar esto.

.element {
    filter: blur(0);
}

sobre el prefijo de proveedor, hágalo usted mismo. -webkit-filter, -ms-filter. los detalles están aquí http://browser.colla.me/show/css_transformation_scale_cause_blurring

El texto no se verá borrosa si no lo hace transitionel transform.

Solo haz esto:

&:hover {
    transform: scale(1.1);
}

Sin la transición como transition: all .2s;