有趣的移动Safari浏览器隐藏内容问题

Question

因此，这个互动问题，我在移动Safari浏览器中的这个Web应用程序，我还没有能够修复。

我有一个“display：none”菜单div，它出现在点击上。显示菜单时，div内的内容会按照其显示的内容显示。问题在于屏幕外的内容。当div内容滚动时，现在在视口内的离屏内容将根本不显示，直到滚动完全停止。这不是一个加载问题，因为所有的内容已经实际加载，而且即使当您向后滚动到顶部时，这种情况也会继续发生。

这不会发生在页面上的实际内容，只是在隐藏的菜单div中加载的内容。我没有使用任何特殊的编码或任何东西，只是标准的CSS和jQuery的.click函数。我试过了所有可以解决这个问题的方法。使用实际的页面滚动代替div内的滚动修复了内容显示问题，但由于某些原因，它不会以动量滚动，并且隐藏的div本身需要比它应该出现的时间更长的时间，可能是2秒，当然这绝对不会好好地。

任何想法如何解决这个问题？

编辑 - 代码如下：

的CSS

#menu { 
width:720px; 
height:100%; 
overflow:auto; 
-webkit-overflow-scrolling:touch; 
background-color:#000000; 
display:none; 
position:absolute; 
z-index:9997; 
} 
#main-menu { 
width:100%; 
display:none; 
background-color:#000000; 
} 

的HTML

<div id="menu"> 
<div id="main-menu"> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

</div> 
</div> 

<div id="wrapper"> 
    <div class="content-loading"></div> 
    <div class="contentarea"> 
     <div class="content pageURL"></div> 
    </div> 
</div> 

<div id="btn-menu" class="bar-button"><img src="images/bar-btn-menu.png" /></div> 

jQuery的

<script type="text/javascript"> 
$('#btn-menu').click(function(){ 
    $("#menu").show(); 
    $("#main-menu").show(); 
    $("#bottom-bar-close").show(); 
}); 
</script> 

Answer 1

想通了，它是这样一个男生的错误，但它确实造成了真实很烦人的问题。主菜单div未设置为“position：relative;”由于某种原因导致所有关闭屏幕内容仅在视口内进行渲染，并且滚动已完全停止。这不会发生在桌面浏览器中，这就是为什么它发现问题很长时间了，如果我因为某种原因没有在另一个页面上的div上设置相对位置，我甚至不会遇到该解决方案。

无论如何，问题解决了。