javascript - 强制在 Mobile Safari 上呈现整页？

Question

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

我正在使用 PhoneGap 构建应用程序并且在 iOS 上尝试通过 JS 更新数字时遇到问题，该数字位于屏幕外“存储”的 DOM 元素中。该元素位于 HTML 中，但位于屏幕外，直到需要按下按钮。当我按下按钮以显示数字时，该元素需要很长时间才能重新出现。

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

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

对此是否有任何修复/解决方法，或者我是否应该在未来尝试围绕此进行设计？我觉得很奇怪，我不能动态地改变屏幕外的元素并在需要时将它们拉回屏幕上......

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 scrolling causes HTML elements to disappear and reappear with a delay