在移动版Safari中修复定位和z-index问题

Question

所涉及的网站是：http://kaye.at/baby

在桌面端，主要内容会滚动到倒计时上方并位于导航栏下方，这些元素都是固定的。但是，在移动端 Safari 上，当用户向上滑动时，内容会在倒计时后面滚动，但一旦松开触摸，它就会弹到前面。

不知道这是否是一个 bug 或者是否可以修复？

以下是 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>

- user1393984

Answer 1

哇，太棒了。只是必须添加：

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

到 #content div。

- user1393984

---

对我没用，哦天啊，我给所有有意义的标签添加了translate3d(0,0,0)。 - Paul Razvan Berg

Answer 2

对于移动版Safari，最好避免使用position:fixed。

确保在滚动容器和其内部所有子元素上使用此类CSS属性。

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

- Sergiy Seletskyy

---

感谢您的无限支持，@Serge_Seletskyy。 - Carol McKay

它不能解决挂起的问题。重现步骤：1）惯性向下滚动；2）带有反弹的惯性向上滚动；3）尝试向上滚动以反弹-在您尝试没有惯性向下滚动之前，滚动视图完全挂起。 - Brian Cannard

Answer 3

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

- cowcowmoomoo

---

https://code.tutsplus.com/tutorials/ios-5-fixed-positioning-and-content-scrolling--mobile-8332 - Mary Pieroszkiewicz