El contenido desaparece por fracción de segundo en la carga de aplicaciones web sin connection.

He observado esto en iOS 4.3 a 5.0. Cuando creas una aplicación web sencilla, sin connection, que significa un file HTML + pocos activos como CSS y JS (todos presentes en el manifiesto de caching), funciona sin connection (lo probé en el modo Avión) – PERO , cuando agrega un aplicación a su pantalla de inicio y abrirlo 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 tu pantalla de inicio de iOS y lanzándola varias veces. Debería ver el efecto de flash blanco cada vez que lo carga.

Este es un gran problema porque muestra el carácter no nativo de una aplicación y da la printing de que la aplicación no está optimizada para performance y errores.

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

Limpiar la pantalla y otros artefactos mientras se renderiza es un problema común de la representación HTML debido a la naturaleza progresiva de HTML. El concepto es que el browser debe dibujar tan temprano y a menudo como sea posible y representar styles / scripts / contenido a medida que estén disponibles. Es posible que el marcado tenga un problema en el que toda la representación se demore hasta que haya algún contenido o una secuencia de commands disponibles. Esto podría suceder si:

  • Tiene alturas dinámicas basadas en las dimensiones de la image, pero no ha establecido las dimensiones de la image en el marcado o CSS.
  • Su layout se basa en tablas y no está utilizando 'layout de tabla: fijo' en CSS.
  • Su HTML usa scripts en línea con document.write ().
  • Tiene algún tipo de function onLoad () que revela / modifica el contenido.
  • Usted vincula a una hoja de estilo externa.
  • Está utilizando contenido externo no almacenable o ha deshabilitado el almacenamiento en caching.
  • Estás usando contenido externo que está devolviendo 404 o no está disponible sin connection.

¿Ha cambiado su HTML / CSS entre probar versiones 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 image de inicio de Apple Touch y el contenido de la página si utilizo la metalabel de viewport. Si saco la label, no hay flash.

Es posible solucionar el problema configurando la label de manera programática.

Creo que lo que sucede aquí es que iOS toma una captura de pantalla de la página cuando se agrega al menu principal. Luego, esta captura de pantalla se muestra durante las cargas de la aplicación (cargas de WebKit). WebKit comienza a representar la página y la página en sí está construida de tal manera que el contenido de la página no está disponible al instante, lo que lleva a 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 al build su JS / CSS para que cargue rápidamente la vista HTML inicial y luego cargue / construya de forma perezosa el rest de los resources en segundo plano. También puede configurar una pantalla de carga personalizada en lugar de la captura de pantalla pnetworkingeterminada que utiliza iOS en la página.

Tal vez si puedes tomarte una captura de pantalla de tu aplicación y luego tener algo como esto:

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

… y asegúrese de que la image 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 sepas que el browser no necesita cargar nada.