Is there a way to force the rendering/updating of all page elements (even those offscreen) on Mobile Safari?

I am building an application using PhoneGap and am experiencing issues on iOS when trying to update a number via JS that is in a DOM element "stored" offscreen. The element is within the HTML but is positioned offscreen until required by pressing a button. When I press the button to show the number, it takes forever for the element to reappear.

I have noticed that Mobile Safari likes to render the page elements (or even sections of elements) as they are visible onscreen. For instance, you can zoom into an image and it will render only the part that is visible and if you scroll over the other section that was not visible it will now begin rendering that (which takes time).

I am just replacing the content of a < span > with a new string (a number) but if the < span > is offscreen it does not seem to get updated until I call it onscreen, which then takes additional time to update.

Is there any fix/workaround to this or should I attempt to design around this in the future? I feel it's rather odd that I can't dynamically change elements offscreen and pull them back onscreen when needed...

HTML:

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

menu_menu is located offscreen by positioning. It then slides in on a button press. When menu_menu attempts to slide in, it chugs as the span element does not appear at first. It then renders in slowly and the slide animation pletes.

I have tried not using a sliding animation and the result remains the same. The element does not render quickly enough so the whole container does not appear in a reasonable amount of time.

JavaScript that updates the element:

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

JavaScript that opens the 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');
}

Thanks, Jordan

Note: This does not happen on the Android Browser so I feel it is directly related to how Mobile Safari handles page rendering.

Is there a way to force the rendering/updating of all page elements (even those offscreen) on Mobile Safari?

I am building an application using PhoneGap and am experiencing issues on iOS when trying to update a number via JS that is in a DOM element "stored" offscreen. The element is within the HTML but is positioned offscreen until required by pressing a button. When I press the button to show the number, it takes forever for the element to reappear.

I have noticed that Mobile Safari likes to render the page elements (or even sections of elements) as they are visible onscreen. For instance, you can zoom into an image and it will render only the part that is visible and if you scroll over the other section that was not visible it will now begin rendering that (which takes time).

I am just replacing the content of a < span > with a new string (a number) but if the < span > is offscreen it does not seem to get updated until I call it onscreen, which then takes additional time to update.

Is there any fix/workaround to this or should I attempt to design around this in the future? I feel it's rather odd that I can't dynamically change elements offscreen and pull them back onscreen when needed...

HTML:

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

menu_menu is located offscreen by positioning. It then slides in on a button press. When menu_menu attempts to slide in, it chugs as the span element does not appear at first. It then renders in slowly and the slide animation pletes.

I have tried not using a sliding animation and the result remains the same. The element does not render quickly enough so the whole container does not appear in a reasonable amount of time.

JavaScript that updates the element:

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

JavaScript that opens the 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');
}

Thanks, Jordan

Note: This does not happen on the Android Browser so I feel it is directly related to how Mobile Safari handles page rendering.

• javascript
• dom
• performance
• mobile-safari
• cordova

• "When I press the button to show the number, it takes forever for the element to reappear." Could you post code of action on button press and part of html with this span? – RobertO Commented Nov 22, 2010 at 21:41

2 Answers 2

This could be known rendering issue of mobile Safari. Rendering could be forced by triggering hardware acceleration with the following CSS rule:

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

Discussed in this question: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

You say it is positioned offscreen, could you just hide the element instead using display: none; ?

The element's content would still be available via JavaScript but would not be on-screen.