10

したがって、モバイルサファリのこのWebアプリで発生しているこの興味深い問題は、現時点では修正できていません。

クリックすると表示される「display：none」メニュー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>
4

1 に答える 1

8

それを理解しました、そしてそれはそのような男子生徒の間違いです、しかしそれは本当に厄介な問題を引き起こします。メインメニューのdivが「position：relative;」に設定されていませんでした。これにより、何らかの理由で、すべての画面外コンテンツがビューポート内にあり、スクロールが完全に停止した場合にのみレンダリングされました。これはデスクトップブラウザでは発生しないため、問題を見つけるのに長い時間がかかりました。何らかの理由で別のページのdivに相対位置を設定しなかった場合、解決策に出くわすことさえありませんでした。

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

于 2012-05-25T16:43:41.407 に答える