Nuestro equipo (no solo mi computadora) tiene un problema de renderizado extraño para Angular 2, que solo ocurre en Chrome.

Es decir, cuando se navega por la aplicación o se actualiza a mitad de la aplicación, muchos de los elementos del DOM son invisibles. P.EJ. párrafos y encabezados que tienen texto en ellos, pero el texto no se representa para el usuario final, pero el texto se ve en el inspector DOM.

El DOM recuperará la visibilidad si edita un atributo CSS aleatorio en el inspector. Este CSS ni siquiera tiene que ser aplicable al elemento DOM invisible en cuestión, ¡ay! el elemento invisible podría ser un párrafo en el encabezado, y activar o desactivar la posición superior de un pie de página aleatorio hará que el párrafo del encabezado recupere la visibilidad.

Antes de alternar un elemento CSS aleatorio

Después de alternar un elemento CSS aleatorio

Esto sucede en las páginas que tienen aplicado un cargador fijo, p. un componente que tiene una posición fija, un índice z súper alto y abarca toda la pantalla. Este cargador de páginas se muestra hasta que finaliza ngOnInit, lo que significa que es bastante rápido la mayor parte del tiempo. Deshabilitar este cargador parece solucionar el problema.

Esto también sucede a veces con el texto en las etiquetas {{ var }}, cuando el valor var se carga después de que se haya cargado la página.

Hemos intentado alternar el cargador con cualquiera

 *ngIf="true/false"

O

 [style.display]="block/none"

Ninguna de estas soluciones funciona, parte del dom sigue siendo invisible.

¿Alguien tiene una idea de por qué sucede esto?