css3 - scalex - WebKit: texto borroso con escala css+translate3d

translate3d css animation

Question

Veo un problema por el cual Chrome y otros navegadores WebKit difuminan masivamente cualquier contenido escalado en css que también haya aplicado translate3d.

Aquí hay un JS Fiddle: 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? Lo entiendo en el simple ejemplo anterior, simplemente podría usar translate en lugar de translate3d - el punto aquí es despojar el código a lo esencial.

Answer 1

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 se aceleran GPU para hacerlos súper rápidos.

CSS3 presenta un grupo de efectos de filtro estándar, uno de ellos es el que funciona como desenfoque:

-webkit-filter: blur(radius);

El parámetro ''radio'' afecta cuántos píxeles de la pantalla se combinan entre sí, por lo que un valor mayor creará más desenfoque. Cero, por supuesto, deja la imagen sin cambios.

Establecer el radio en 0 obligará al navegador a usar el cálculo de la GPU y obligarlo a mantener el 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 las pantallas de la retina. (Consulte aquí: ¿Por qué no desenfoca (0) elimina todo el desenfoque de texto en Webkit / Chrome en pantallas retina? ). Entonces, para hacer que funcione también para retina, recomiendo agregar esta segunda línea:

-webkit-transform: translateZ(0);

Answer 2

Webkit trata los elementos transformados en 3D como texturas en lugar de vectores para proporcionar aceleración de hardware 3D.

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

Lo mismo para el anterior ^

Answer 3

Encontré eso usando:

-webkit-perspective: 1000;

en el contenedor de tu fuente o ícono, las cosas se mantuvieron nítidas para mí después de experimentar con el problema en Android nexus 4.2 por algún tiempo.

Answer 4

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

Answer 5

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 de JavaScript para volver a calcular la matriz de transformación eliminando los valores decimales de la matriz. ver: https://.com/a/42256897/1834212

Answer 6

Utilicé javascript para mover el texto 1px arriba y luego 100ms después, 1px abajo. Es casi imperceptible y resolvió el problema completamente entre navegadores.

Answer 7

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

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

Tenga en cuenta que el antialiasing aún está bajo (se pierden los tallos), así que estoy reforzando el texto con un poco de sombra de texto.

Answer 8

body {
-webkit-font-smoothing: subpixel-antialiased;
}

o creo que podrías poner eso 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 personalizadas de font-face.