修复了移动 Safari 中的定位/z-index 问题

Question

所以有问题的网站：http://kaye.at/baby

下面的主要内容向上滚动到倒计时顶部和导航下方，它们都是固定元素。这在桌面上运行良好，但在移动 safari 上，当用户向上移动时，内容会在倒计时后滚动，但一旦释放触摸，它就会在前面弹出。

只是想知道这是一个错误还是可以修复的东西？

这是 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>

Answer 1

啊，太棒了。只需添加：

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

到#content div。

Answer 2

如果您申请#banner {z-index:-1} 和body {background:transparent}，您的问题应该会得到解决。

Answer 3

对于 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);
}