問題のサイト: http://kaye.at/baby
以下の主要なコンテンツは、カウントダウンの上部とナビゲーションの下でスクロールアップされます。どちらも固定要素です。これはデスクトップでは正常に機能しますが、モバイルサファリでは、ユーザーが上に移動するとコンテンツがカウントダウンの後ろにスクロールしますが、タッチが解除されると前面にポップアップします。
これがバグなのか、それとも修正できるものなのか疑問に思っているだけですか?
CSSは次のとおりです。
#header { position: fixed; width: 100%; top: 0px; z-index: 10; }
#content { width: 100%; position: relative; top: 650px; z-index: 7; }
#banner { position: fixed; width: 100%; position: fixed; background: url('http://kaye.at/baby/img/stork.jpg') no-repeat center bottom #fff; padding-top: 185px; z-index: 1; }
#defaultCountdown { max-width: 70%; height: auto; }
そしてHTML(メイン構造):
<div id="header">
<div id="nav">
<ul>
<li><a class="active" href="index.php">START</a></li>
<li><a href="ultrasound-images.php">ULTRASOUND PICS</a></li>
<li><a href="pinkorblue.php">PINK OR BLUE?</a></li>
</ul>
</div>
</div>
<div id="banner">
<div id="defaultCountdown"></div>
</div>
<div id="content">
</div>
すごい。追加する必要がありました:
-webkit-transform: translate3d(0,0,0);
#content divへ。
Mobile Safariの場合、position:fixedの使用を避ける方が良い
スクロールコンテナーとその中のすべての子にこのようなCSSを使用してください
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
#banner {z-index:-1}
とbody {background:transparent}
を適用する場合、問題を解決する必要があります。