Question

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

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

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

我只是替换＆lt;的内容。 span＆gt;使用新字符串（数字）但是如果＆lt; span＆gt;在屏幕外，它似乎没有更新，直到我在屏幕上调用它，然后需要额外的时间来更新。

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

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

Answer 2

你说它位于屏幕外，您是否可以使用display: none;隐藏元素？

元素的内容仍然可以通过JavaScript获得，但不会出现在屏幕上。

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

2 个答案: