35

問題のサイト: 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>
4

3 に答える 3

73

うーんすごい。追加する必要がありました：

-webkit-transform: translate3d(0,0,0);

#content div へ。

于 2013-08-16T11:54:22.703 に答える
5

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);
}
于 2013-09-09T13:49:25.850 に答える