En Google Chrome para Windows existe un problema apodado "creación accidental de capas". Cuando un elemento recibe la propiedad position: relative, este elemento desaparece del flujo normal de la página para crear una capa en la que este elemento reside por separado. Las capas pueden ordenarse con z-index para alterar el orden en el que se muestran.
El problema
El problema viene dado cuando dos o más capas tienen posición relativa y además, al menos una contiene animaciones. Ocurre que la animación se renderiza mediante aceleración gráfica en la GPU, y por lo tanto, todas las capas que estén por encima,** también serán renderizadas por la GPU**. Podemos leer más acerca de la creación de capas (composite layers) aquí.
Esto provoca dos inconvenientes.
Pérdida de subpixel antialising
El primero y el que nos ocupa en este artículo, es que la capa de texto también será renderizada por la GPU y esto provocará que el texto pierda sus propiedades y pase a ser una imagen renderizada en la GPU, por lo que la capa pierde el subpixel antialiasing (suavizado del subpixel). Esto consigue que la capa se vea de una manera cuando hay animaciones y de otra distinta cuando no las hay. Por lo tanto el texto parece que cambia de aspecto.
Podemos ver un ejemplo a continuación, en el que al hacer click sobre la caja azul, se inicia la animación y al hacer click en otra parte la animación se detendrá. Podremos ver como parece que el texto salta.
See the Pen Accidental layer creation by Felix (@felixsanz) on CodePen.
El precio de la creación de texturas
El segundo problema es que los dispositivos móviles no tienen tanta potencia como un sobremesa. Por lo tanto crear capas adicionales en la GPU tiene un precio. Un precio que podemos permitirnos pagar para que la animación sea más fluida, pero no deberíamos necesitar que las capas de texto que hubiera por encima, fuesen renderizadas también en la GPU.
La solución
Una solución chapucera sería forzar la capa de texto para que siempre fuese generada por la GPU. Asignando por ejemplo la propiedad -webkit-transform: translateZ(0) o -webkit-transform: translate3d(0,0,0) conseguiremos que Chrome renderice siempre esa capa en la GPU, por lo que al iniciar las animaciones, el texto no saltará ni se convertirá. De hecho ese texto nunca tendrá subpixel antialising, lo cual es un problema.
La segunda solución sería asignar a la animación un z-index alto, así esta capa se mostraría la primera y todas las que hubiera por debajo no se procesarían por la GPU. Esta es la solución idónea, pero mucho me temo que en las últimas versiones de Chrome esto ya no tiene efecto alguno.
La tercera solución y algo que no depende de nosotros, es habilitar la API DirectWrite en Chrome. Una API que se encarga de renderizar las fuentes en Windows y que en los últimos 5 años ha causado un problema de calidad en las tipografías web, tal como puedes leer en este artículo.
Podemos hacer la prueba y habilitarlo nosotros mismos a través de chrome://flags/#enable-direct-write. Pero como bien sabemos, esto no ayudará a nuestros usuarios hasta que la característica sea activada por defecto en Google Chrome, lo cual sea dicho, es cuestión de semanas.