1. Inicio
  2. Pregunta y respuesta
  3. El contenido desaparece por fracción de segundo en la aplicación web sin conexión carga

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

2011-09-23 15 views
8

Lo he observado en iOS 4.3 a 5.0. Cuando crea una aplicación web simple incluso fuera de línea, es decir, un archivo HTML + pocos activos como CSS y JS (todos presentes en el manifiesto de caché), funciona sin conexión (probé en modo avión) - PERO, cuando agrega tal aplicación a su pantalla de inicio y ábrala en modo de pantalla completa, primero muestra el contenido inicial, y luego todo desaparece (la página se vuelve blanca) durante medio segundo o más, luego el contenido vuelve a aparecer.El contenido desaparece por fracción de segundo en la aplicación web sin conexión carga

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

Esto es un gran problema porque delata 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.

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

Fuente

2011-09-23 mislav

Respuesta

5

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 ocurrir si:

  • Usted tienen alturas dinámicas basadas en las dimensiones de imagen, sino que tienen no establecer las dimensiones de la imagen en el margen de beneficio o CSS.
  • Su diseño se basa en tablas y no está utilizando 'table-layout: fixed` en CSS.
  • Su HTML utiliza scripts en línea con document.write().
  • Tiene algún tipo de función onLoad() que revela/modifica el contenido.
  • Se vincula a una hoja de estilo externa.
  • Está utilizando contenido externo que no puede almacenarse en caché 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?

Fuente

2011-10-13 05:19:36 SpliFF

+0

No, HTML/CSS no ha cambiado. Sin embargo, buen punto acerca de los activos externos. Veré si ayuda poner el CSS en línea. – mislav

+2

¿Has resuelto el problema? ¿Descubriste lo que estaba causando? –

1

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 página 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 problema hasta cierto nivel al construir 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 iOS utiliza desde la página.

Tal vez si usted puede tomar usted mismo una captura de pantalla de la aplicación y luego tener algo como esto:

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

... y asegurarse de que la imagen está disponible y viene 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.

Fuente

2011-09-24 10:10:16

+0

Tiene razón acerca de que iOS toma una captura de pantalla, lo enciende al principio y luego vuelve a dibujar la página. Aún así, ¿por qué necesitaría borrar toda la página en el medio? Además, Glyphboard (que muestra claramente el problema) tiene tanto una "manzana-toque-inicio-imagen" y un color de fondo y todo lo que aún desaparece. Parece que no puedes hacer nada desde la página para evitar esto. – mislav

+0

Más tarde, redibujar la página puede estar relacionado con su código JavaScript, diseño HTML o contenido; estoy seguro de que puede evitarlo. Lo que se ve es que el navegador desencadena el reflujo https://code.google.com/speed/articles/reflow.html –

2

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ínimo, aparece un destello blanco entre la manzana-touch-startup-imagen y los contenidos de la página si uso la metaetiqueta de la ventana gráfica Si saco la etiqueta, no hay flash.

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

Fuente

2012-07-05 18:08:09

Cuestiones relacionadas

 Cuestiones relacionadas