在Mobile Safari上强制执行完整页面渲染？

Question

有没有办法在Mobile Safari上强制渲染/更新所有页面元素(甚至是屏幕外的元素)？

我正在使用PhoneGap构建应用程序,并且在尝试通过JS在屏幕外"存储"的DOM元素中更新数字时遇到问题.该元素位于HTML中,但在屏幕外定位,直到按下按钮为止.当我按下按钮显示数字时,元素将重新出现.

我注意到Mobile Safari喜欢渲染页面元素(甚至元素的部分),因为它们在屏幕上可见.例如,您可以放大图像,它只会渲染可见的部分,如果您滚动其他不可见的部分,它现在将开始渲染(这需要时间).

我只是用新字符串(数字)替换<span>的内容,但如果<span>在屏幕外,它似乎不会更新,直到我在屏幕上调用它,然后需要额外的时间来更新.

是否有任何修复/解决方法,或者我将来是否应尝试设计？我感觉很奇怪,我无法动态更改屏幕外的元素,并在需要时将它们拉回屏幕上...

HTML:

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

menu_menu通过定位位于屏幕外.然后按下按钮滑入.当menu_menu尝试滑入时,它会突然显示,因为span元素最初不会出现.然后缓慢渲染并完成幻灯片动画.

我试过不使用滑动动画,结果保持不变.元素的渲染速度不够快,因此整个容器不会在合理的时间内出现.

更新元素的JavaScript:

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

打开菜单的JavaScript:

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

谢谢,乔丹

注意:这不会发生在Android浏览器上,因此我觉得它与Mobile Safari处理页面呈现的方式直接相关.

Answer 1

这可能是移动 Safari 的已知渲染问题。可以通过以下 CSS 规则触发硬件加速来强制渲染：

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

在这个问题中讨论：iPad Safari 滚动导致 HTML 元素消失并延迟重新出现

Answer 2

您说它位于屏幕外，您可以隐藏该元素而不是使用 吗display: none;？

该元素的内容仍然可以通过 JavaScript 访问，但不会显示在屏幕上。