Force le rendu de la page entière sur Mobile Safari?

Question

Existe-t-il un moyen de forcer le rendu/la mise à jour de tous les éléments de la page (même ceux hors écran) sur Mobile Safari?

Je construis une application en utilisant PhoneGap et je rencontre des problèmes sur iOS lorsque j'essaie de mettre à jour un numéro via JS qui est dans un élément DOM "stocké" hors écran. L'élément est dans le code HTML mais est positionné hors écran jusqu'à ce que nécessaire en appuyant sur un bouton. Lorsque j'appuie sur le bouton pour afficher le nombre, il faut une éternité pour que l'élément réapparaisse.

J'ai remarqué que Mobile Safari aime rendre les éléments de la page (ou même des sections d'éléments) tels qu'ils sont visibles à l'écran. Par exemple, vous pouvez zoomer sur une image et cela ne rendra que la partie qui est visible et si vous faites défiler l'autre partie qui n'était pas visible, elle commencera à rendre cela (ce qui prend du temps). Je ne fais que remplacer le contenu d'un < span> par une nouvelle chaîne (un nombre) mais si le < span> est hors écran, il ne semble pas être mis à jour jusqu'à ce que je l'appelle à l'écran, ce qui prend plus de temps mettre à jour.

Y at-il un correctif ou une solution de contournement à cela ou devrais-je essayer de concevoir autour de cela à l'avenir? Je pense qu'il est assez bizarre que je ne peux pas changer de façon dynamique les éléments et les tirer hors écran en arrière à l'écran en cas de besoin ...

HTML:

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

menu_menu est situé hors-champ par le positionnement. Il glisse ensuite sur un bouton. Lorsque menu_menu tente de glisser, il se bloque car l'élément span n'apparaît pas au premier abord. Il restitue ensuite lentement et l'animation de la diapositive se termine.

J'ai essayé de ne pas utiliser d'animation glissante et le résultat reste le même. L'élément ne s'affiche pas assez rapidement pour que le conteneur entier n'apparaisse pas dans un délai raisonnable.

JavaScript qui met à jour l'élément:

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

JavaScript qui ouvre le menu:

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'); 
} 

Merci, Jordan

Note: Ceci ne se produit pas dans le navigateur Android, donc je pense qu'il est directement lié à la manière dont Mobile Safari gère le rendu des pages.

Answer 1

Vous dites qu'il est positionné hors écran, pourriez-vous simplement cacher l'élément à la place en utilisant display: none;?

Le contenu de l'élément serait toujours disponible via JavaScript mais ne serait pas affiché à l'écran.

Answer 2

Cela peut être un problème de rendu connu de Safari mobile. Le rendu peut être forcé en déclenchant l'accélération matérielle avec la règle CSS suivante:

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

Examinée dans cette question: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay