興味深いモバイルサファリの隠しコンテンツの問題

Question

私はこのサッカーのモバイルアプリでこの絡み合いの問題を解決できませんでした。

私は「表示：なし」メニューdivをクリックすると表示されます。メニューが表示されると、div内の内容が表示されます。この問題は、オフスクリーンのコンテンツにあります。 divコンテンツがスクロールされると、スクロールが完全に停止するまで、ビューポート内にあるオフスクリーンコンテンツはまったく表示されません。すべてのコンテンツが実際に既に読み込まれているため、読み込みの問題ではなく、上にスクロールして戻っても引き続きこの問題が発生します。

実際にページにあるコンテンツ、非表示のメニューdiv内に読み込まれたコンテンツのみが表示されます。私は特別なコーディングや何も使用していない、ちょうど標準のCSSとjqueryの.click関数。私はこれを解決するために考えられるすべての方法を試しました。 div内のスクロールの代わりに実際のページスクロールを使用してコンテンツ表示の問題を修正しましたが、なんらかの理由でスクロールして勢いを失い、隠されたdiv自体が表示されるはずの時間より長くかかります大丈夫。

これを修正する方法はありますか？

編集 - 以下のコード：

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に相対的な位置を設定しなかったとしても、解決策を見つけられませんでした。

とにかく、問題は解決しました。