ios - color - El contenido desaparece por una fracción de segundo en la carga de la aplicación web sin conexión

ionic header color (3)

Lo he observado en iOS 4.3 a 5.0. Cuando creas una simple aplicación web sin conexión, es decir, un archivo HTML + pocos recursos como CSS y JS (todos presentes en el manifiesto de caché), funciona sin conexión (lo probé en modo avión) - PERO , cuando lo agregas aplicación en la pantalla de inicio y ábrala en modo de pantalla completa, primero muestra el contenido inicial, luego todo desaparece (la página se vuelve blanca) durante medio segundo o más, luego el contenido vuelve a aparecer.

Puedes ver esto agregando Glyphboard , una aplicación web fuera de línea conocida y útil, a la pantalla de inicio de tu iOS y abriéndola varias veces. Debería ver el efecto de flash blanco cada vez que lo carga.

Este es un gran problema porque revela lo no nativo de una aplicación y da la impresión de que la aplicación no está optimizada para el rendimiento y el error.

Intenté encontrar informes sobre esto, pero lo único que puedo encontrar son rumores y conceptos erróneos sobre el fiasco del motor de renderizado iOS 4.3 JavaScript, que no necesita estar relacionado con este problema. Pero en iOS versión 3, recuerdo claramente que nunca he visto el flash blanco.

Creo que lo que sucede aquí es que iOS toma una captura de pantalla de la página cuando se agrega al menú principal. Luego, esta captura de pantalla se muestra durante las cargas de la aplicación (se carga WebKit). WebKit comienza a renderizar la página y la misma está construida de tal manera que el contenido de la página no está disponible instantáneamente, lo que genera un flash blanco que es una página renderizada cuando el contenido de la página aún no está allí,

Puede evitar el problema a un cierto nivel construyendo su JS / CSS para que cargue la vista inicial de HTML rápidamente y luego cargue / construya el resto de los recursos en el fondo. También puede configurar una pantalla de carga personalizada en lugar de la captura de pantalla predeterminada que usa iOS desde la página.

Tal vez si puede hacerse una captura de pantalla de su aplicación y luego tener algo como esto:

<body style="background: white url(''my-initial-loading-screen.png'')" />

... y asegúrese de que la imagen esté disponible y provenga de manifiesto.

O mejor aún, tiene una pantalla de carga que no requiere ningún recurso externo para mostrar (simplemente HTML) para que sepa que el navegador no necesita cargar nada.

La eliminación de la pantalla y otros artefactos durante el procesamiento es un problema común de la representación de HTML debido a la naturaleza progresiva de HTML. El concepto es que el navegador debe dibujar tan pronto como sea posible y renderizar estilos / scripts / contenido a medida que estén disponibles. Es posible que el marcado tenga un problema en el que todo el renderizado se retrase hasta que haya algo de contenido o un script disponible. Esto podría suceder si:

Tiene alturas dinámicas basadas en las dimensiones de la imagen, pero no ha establecido las dimensiones de la imagen en el marcado o CSS.
Su diseño se basa en tablas y no está utilizando ''table-layout: fixed` en CSS.
Su HTML usa scripts en línea con document.write ().
Tienes algún tipo de función onLoad () que revela / modifica el contenido.
Usted se vincula a una hoja de estilo externa.
Está utilizando contenido externo que no puede descartarse o ha deshabilitado el almacenamiento en caché.
Está utilizando contenido externo que devuelve 404 o no está disponible sin conexión.

¿Ha cambiado su HTML / CSS entre las versiones de prueba de IOS?

He encontrado que esto es causado por el uso de:

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">

Con una página mínima, obtengo un flash blanco entre la manzana-touch-startup-image y el contenido de la página si utilizo la metaetiqueta de la ventana gráfica. Si saco la etiqueta, no hay flash.

Es posible solucionar el problema configurando la etiqueta de forma programática.