在 Mobile Safari 上强制全页渲染？

Question

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

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

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

我只是替换 a < 的内容跨度>与一个新的字符串（一个数字），但如果 <跨度>在屏幕外，它似乎不会更新，直到我在屏幕上调用它，然后需要额外的时间来更新。

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

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

谢谢， Jordan

注：这种情况不会发生在 Android 浏览器上，因此我觉得这与 Mobile Safari 处理页面渲染的方式直接相关。

Answer 1

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

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

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

Answer 2

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

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