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

126

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!

Ryan O'Rourke
fuente
Acabo de visitar el sitio usando Firefox e IE 10, no veo el problema. Si se limita a Chrome, es posible que deba esperar a que Google lo repare por sí mismo.
Nolonar
No veo ningún desenfoque ... estoy en Chrome v25 / PC
vsync
También me he encontrado con este problema anteriormente, ya que Nolonar mencionó que tendremos que esperar a que Google lo solucione.
raj_n
No es una solución, pero me he dado cuenta de que el problema solo ocurre cuando uso CSS OptimizeLegibility.
Bangkokiano
El enlace está roto.
Timothy003

Respuestas:

78

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.

2ne
fuente
12
Todas estas técnicas parecen mejorar las cosas, pero todavía no puedo lograr que Chrome tenga el mismo nivel de claridad que veo en Firefox.
Michael Martin-Smucker
13
backface-visibility: hidden;Seguro que funcionó en mi caso, al resolver algunos movimientos borrosos extraños causados ​​por la transición de opacidad, es decir. El movimiento extraño ahora se ha ido, PERO ha hecho que los textos en mi div permanezcan borrosos en su lugar.
ITWitch
13
Como sugirió @ykadaru, intente agregar perspective(1px)a su transform:código, esto funcionó para mí en Chrome mientras nada más resolvió el problema
Serge Eremeev
44
No funciona en la versión 65.0.3325.162 de Chrome (compilación oficial) (64 bits) que se ejecuta en Ubuntu 17.10 con sesión Gnome X11 (Wayland desactivado)
Marecky
3
En Chrome 72, las dos primeras opciones hacen que el texto se vea borroso durante y al final de la transformación
Brandito el
24

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;
ykadaru
fuente
44
Para mí, esto en realidad lo empeora.
balu
1
Para mí, esto soluciona la falla (sin esto, el elemento se mueve 1px después de que se realiza la animación, transformar: perspectiva (1px) solo arregla esto!)
Sergiu
@balu revisa mi respuesta actualizada! deshacerse de la perspective(1px)propiedad y ver si funciona mejor.
ykadaru
16

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.

Jordan Nakamoto
fuente
1
Ese es el único enfoque que funcionó para mí. Los otros enfoques (visibilidad de la cara posterior, agregar filtros, perspectiva y buen viejo translateZ) lo empeoraron. Intenta escalar a píxeles completos. Por ejemplo, vaya de 14px a 16px usando un factor de escala de 1,1429 (16/14).
hugo der hungrige
1
Trabajó para mí sin translateZ(0), cambió solo 1.05a1.048
A. Volg
15

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.

Dan
fuente
¿Por qué alguien menospreciaría esto? No lo entiendo ... :( Este es un problema completamente válido en algunas versiones de Chrome, y parece que "cambiará" en general todavía es bastante nuevo y probablemente no debería usarse. Para obtener más información, consulte greensock .com / will-change
Dan
Tuve el mismo problema. Gracias por publicar.
llovió
Tuve el mismo problema con el renderizado de componentes de diseño de materiales en Chrome 75. La eliminación del estilo css "will-changed" lo solucionó.
Rob
Confirmado en Chrome 79
Fareesh Vijayarangam
1
Tengo lo contrario, agregar un will-change: transform;poco soluciona el problema
Jakub Zawiślak
14

En vez de

transform: scale(1.5);

utilizando

zoom : 150%;

corrige el problema de borrosidad del texto en Chrome.

Naisheel Verdhan
fuente
Puede ayudar pero también presenta otros problemas, como las líneas de borde blanco que se introducen a veces
Kevin
1
No estoy seguro de por qué el voto negativo. Cuando apliqué esto a las casillas de verificación, funcionó mucho mejor que transform: scale ()
Brian McCall el
2
Para firefox, use transform: scale () funciona como un encanto sin ningún desenfoque. Tendrá que trabajar en la detección del navegador y actuar en consecuencia para Chrome / Safari y Firefox.
Naisheel Verdhan
15
Otra cuestión es que el zoom no parece que el trabajo con la propiedad de transición, por lo que no se puede utilizar para animaciones CSS
ericgrosse
3
Funciona y zorro lo borroso, pero también cambia la posición de los elementos.
user1156544
8

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)
andyw
fuente
1
¿Llegaste a algún lado con tu informe de error?
Diazole
me temo que ni siquiera recuerdo dónde envié el error. Lo hizo sin embargo.
Andy
Estoy usando Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (con vista 125% ampliada) y tengo textos borrosos en el menú desplegable. El menú se coloca usando transform: translate3d();y esto parece causar el problema. Ninguna de las soluciones sugeridas funcionó para mí. Excepto / un poco este. Esto funciona solo si lo configuro primero con algún valor positivo (por ejemplo, blur(0.1px)) y luego cambio a blur(0px). Dado que el elemento es dinámico y también requiere una solución dinámica (JS), ... esto apesta: \
akinuri
7

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.

ruido visual
fuente
-webkit-filter: blur(0);solo funciona para mi. backface-visibility: hidden;Desenfoca mi elemento cuando restablezco la escala después.
Kai Hartmann
Esto es un poco divertido para Chrome ... si lo configuro blur(0px);no lo arregla. pero si lo hago blur(1px);y luego presiono la flecha hacia abajo para blur(0px);que parezca correcto. Ido en la actualización de la página / no importa lo que escriba en el CSS
Tom Roggero
1
@TomRoggero Esto suena menos específico para el valor de la propiedad de desenfoque y más sobre cuándo se vuelve a dibujar el diseño. Puede experimentar forzar el redibujo del elemento usando JavaScript después de un retraso.
Gajus
5

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.

scipper
fuente
Estaba corriendo a este mismo problema haciendo exactamente lo mismo. Estaba centrando un modal con translate3d (-50%, -50%, 0). En mi caso, aumenté los valores a -50.048% y se ve perfecto.
Chris Gutiérrez
4

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

transform: scale(1.005);

a

transform: scale(1.005) perspective(1px);
SUHAIL KC
fuente
3

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

Tom Roggero
fuente
Tenga en cuenta que zoomno está definido por ningún estándar web y no es compatible con firefox caniuse.com/#feat=css-zoom
Boltgolt
3

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%;   
Raza Ahmed
fuente
44
No hay soporte de firefox parazoom
Dustin Poissant
3

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.

Corentin
fuente
3

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.

SJacks
fuente
Se espera desenfoque cuando se usa la traducción, porque el elemento puede terminar en medio píxel . Ahora hay mejores alternativas para centrar las cosas: muestra de flexbox , muestra de cuadrícula
Timothy003
El único navegador que he probado que parece tener un problema con el centro de transformación es Chrome, todo lo demás parece claro como el cristal. ¡Miré hacia atrás y este problema ha existido durante 7 años! Aún así, hay muchas maneras de pelar un gato y, como usted dice, ya ni siquiera es necesario.
SJacks
esto es increíble, pero filtro: desenfoque (-0.1px); me ayudó !!. Cómo diablos funciona esto ??
jt3k
3

Yo tengo este mismo problema. Lo arreglé usando:

.element {
  display: table
}
Ravi
fuente
2
loco pero funciona; Chrome es el nuevo IE aparentemente
Arthur
oooow señor! ir funciona! Supongo que la tabla 'arreglar' el ancho en PX no era posible con medio píxel ...
LuanLuanLuan
2

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.

Gendos-ua
fuente
Funciona para mí y también está marcado como no utilizado. También he agregado will-change: transform;que corrige los bordes borrosos de los elementos. Cualquier otra respuesta no funcionó para mí.
Jakub Zawiślak
2

Mi solución fue:

pantalla: inicial;

Luego fue crujiente


fuente
1

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)

Sengupta Amit
fuente
Agregar perspective(1px)realmente lo hizo peor para mí :(
balu
1

Arreglé mi caso agregando:

transform: perspective(-1px)
Anders Lund
fuente
Esto para mí acaba de eliminar el scale()resultado de la transformación
jpenna
1

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);
}
JonasB
fuente
1

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;
}
Kyle Underhill
fuente
1

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!

Prajwal_Shenoy
fuente
1

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

Oleg Bondarenko
fuente
0

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.

Normangorman
fuente
0

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

¡la mancha desapareció!

Tanha Islam
fuente
0

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.

Austin McCool
fuente
Esto es lo que le pasó a mi. No puedo deshacerme de este efecto borroso. Una solución que ha funcionado es establecer estas propiedades: top: 0, bottom: 0, left: 0; right: 0; margin: autopero luego el contenedor ocupará todo el espacio que pueda (debe ser ancho), por lo que esto no funciona en caso de que el contenido decida qué tan grande será el contenedor.
kwiat1990
0

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);
    }
})}
piedra loca
fuente
0

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.

usuario1769038
fuente
-1

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;

kyw
fuente