Forzar la representación de la página completa en Mobile Safari?

Question

¿Hay alguna manera de forzar la representación/actualización de todos los elementos de página (incluso aquellos fuera de pantalla) en Mobile Safari?

Estoy construyendo una aplicación usando PhoneGap y estoy experimentando problemas en iOS cuando intento actualizar un número a través de JS que está en un elemento DOM "almacenado" fuera de pantalla. El elemento está dentro del código HTML pero se coloca fuera de la pantalla hasta que se requiera presionando un botón. Cuando presiono el botón para mostrar el número, el elemento tarda una eternidad en reaparecer.

He notado que a Mobile Safari le gusta mostrar los elementos de la página (o incluso las secciones de los elementos) ya que son visibles en la pantalla. Por ejemplo, puede acercarse a una imagen y solo representará la parte que está visible y si se desplaza sobre la otra sección que no estaba visible, ahora comenzará a procesarla (lo que lleva tiempo).

Estoy simplemente reemplazando el contenido de un < span> con una nueva cadena (un número) pero si el < span> está fuera de pantalla, no parece actualizarse hasta que lo llamo en pantalla, lo que lleva más tiempo actualizar.

¿Hay alguna solución/solución a esto o debo intentar diseñar esto en el futuro? Siento que es bastante extraño que no puedo cambiar dinámicamente los elementos fuera de la pantalla y tirar de ellos en pantalla cuando sea necesario ...

HTML:

<div class="menu_container" id="menu_menu">  
<p id="hit_pct"><span class="gold">100</span> Hit %</p> 
</div><!-- /#menu_menu --> 

menu_menu se encuentra fuera de la pantalla mediante el posicionamiento. Luego se desliza al presionar un botón. Cuando menú_menú intenta deslizarse, resuena porque el elemento span no aparece al principio. Luego se procesa lentamente y la animación de diapositivas se completa.

He intentado no utilizar una animación deslizante y el resultado sigue siendo el mismo. El elemento no se procesa lo suficientemente rápido para que el contenedor completo no aparezca en un período de tiempo razonable.

JavaScript que actualiza el elemento:

if(aTilesHit == 0){ 
    pct = 100; 
}else{ 
    pct = Math.round((abTilesHit/aTilesHit)*100); 
} 
x$('#hit_pct').inner('<span class="gold">'+pct+'</span> Hit %'); 

JavaScript que abre el menú:

animationsOn = false; //Halts the animations that will be behind the menu 
if(x$('.menu_button').hasClass('active')){ 
    close_menus(); 
}else{ 
    x$('#ingameMenus').css({'left':0}); //Positions the menu on screen 
    x$('.menu_container').removeClass('hidden'); //.hidden positions the element offscreen. It does NOT add display=hidden 
    x$('.menu_button').addClass('active'); 
} 

Gracias, Jordan

Nota: Esto no sucede en el navegador de Android por lo que siento que está directamente relacionado con cómo Mobile Safari maneja la representación de la página.

Answer 1

Usted dice que está posicionado fuera de la pantalla, ¿podría simplemente ocultar el elemento utilizando display: none;?

El contenido del elemento aún estaría disponible a través de JavaScript pero no aparecería en la pantalla.

Answer 2

Esto podría ser un problema de representación conocido de Mobile Safari. Prestación podría verse obligado mediante la activación de la aceleración de hardware con la siguiente regla CSS:

-webkit-transform: translate3d(0,0,0) 

discutidos en esta pregunta: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay