WebKit: Texto borroso con escala css + translate3d

Estoy viendo un problema donde Chrome y otros navegadores WebKit desenfocar masivamente cualquier contenido a escala CSS que también tiene translate3d aplicado.

Aquí hay un violín de JS: http://jsfiddle.net/5f6Wg / . (Ver en Chrome.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}
<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

¿Hay alguna solución conocida para esto? Entiendo que en el simple ejemplo anterior, simplemente podría usar translate en lugar de translate3d-el punto aquí es quitar el código a lo esencial.

Author: Mosh Feu, 2011-11-06
Source

8 answers

Webkit trata los elementos transformados en 3d como texturas en lugar de vectores para proporcionar aceleración 3d por hardware. La única solución a esto sería aumentar el tamaño del texto y reducir la escala del elemento, en esencia creando una textura de mayor resolución.

Ver aquí: http://jsfiddle.net/SfKKv /

Tenga en cuenta que el antialiasing sigue siendo underpar (las plicas se pierden), por lo que estoy reforzando el texto con un poco de sombra de texto.

 34
Author: Duopixel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-07 15:37:42

Encontré que usando: 

-webkit-perspective: 1000;

En el contenedor de su fuente o conjunto de iconos mantuvo las cosas nítidas para mí después de experimentar con el problema en Android nexus 4.2 durante algún tiempo.

 32
Author: hallodom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-27 08:45:42

Un efecto de filtro css es una operación gráfica que permite manipular la apariencia de cualquier elemento HTML. Desde Chromium 19 estos filtros son GPU acelera para hacerlos súper rápido.

CSS3 introduce un montón de efectos de filtro estándar, uno de ellos es el blur fitler:

-webkit-filter: blur(radius);

El parámetro 'radius' afecta a cuántos píxeles de la pantalla se mezclan entre sí, por lo que un valor más grande creará más desenfoque. Cero, por supuesto, deja la imagen invariable.

Establecer el radio en 0 forzará al navegador a usar el cálculo de GPU y lo obligará a mantener su elemento html sin cambios. Es como aplicar efectos de "bordes duros".

Así que la mejor solución para mí para arreglar este efecto borroso fue agregar esta simple línea de código: 

-webkit-filter: blur(0);

También hay un error conocido que solo afecta a las pantallas retina. (Vea aquí: ¿Por qué blur (0) no elimina todo el desenfoque de texto en Webkit/Chrome en las pantallas retina?). Así que con el fin de hacerlo funciona también para retina, recomiendo añadir esta segunda línea:

-webkit-transform: translateZ(0);
 28
Author: maoosi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:05

Prueba esto

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

O para un enfoque más exacto, puede llamar a una función javascript para recalcular la matriz de transformación eliminando los valores decimales de la matriz. véase: https://stackoverflow.com/a/42256897/1834212

 5
Author: Miguel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-31 11:39:46

Me encontré con este problema al usar el complemento isótopo (http://isotope.metafizzy.co/index.html) en combinación con el plugin de zoom (http://janne.aukia.com/zoomooz/). Construí un plugin jquery para manejar mi caso. Lo vomité en un repositorio de Github en caso de que alguien pudiera beneficiarse de él. - https://github.com/charleshimmer/jquery-hirestext .

 1
Author: chuckles,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-11 20:10:20

Utilicé javascript para mover el texto 1px arriba y luego con 100ms después, hacia atrás 1px abajo. Es casi poco perceptivo y resolvió el problema completamente cross-browser.

 0
Author: Mixtelf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-13 14:20:02 
body {
-webkit-font-smoothing: subpixel-antialiased;
}

O creo que se podría poner en un elemento específico, pero estaba teniendo problemas con un elemento que afecta a todo el sitio.

Creo que es un problema con las fuentes font-face personalizadas.

 -1
Author: placeboaddict,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-31 21:26:13

Webkit trata los elementos transformados en 3d como texturas en lugar de vectores con el fin de proporcionar aceleración 3d hardware.

Esto no tiene nada que ver. Notará que su problema de aliasing se puede solucionar con la adición de información de duración y dirección (por ejemplo, 0.3 lineal). Tener una yegua tratando de renderizar todo en tiempo de ejecución:

Lo mismo para lo anterior ^

 -2
Author: Tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-22 14:22:46