Fixed positioning/z-index issue in mobile safari

Question

So the site in question: http://kaye.at/baby

The main content below scrolls up over the top of the countdown and under the navigation which are both fixed elements. This works fine on desktop but on mobile safari, the content scrolls behind the countdown as the user moves up but once touch is released, it pops in front.

Just wondering whether this is a bug or it is something that can be fixed?

Here's the 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; }

And HTML (main structure):

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

Giana

Answer 1

Ugh amazing. Just had to add:

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

to the #content div.

Giana

Didn't work for me and oh boy I added translate3d(0,0,0) to all tags on which it made sense – Sladen

Answer 2

For Mobile Safari it's better to avoid using position:fixed

Make sure you use such CSS for your scrolling container and all children inside of it

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

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

Fattish

It doesn't solve hanging problem. Steps to reproduce: 1) scoll down with inertia; 2) scroll up with inertia (with bounce); 3) try to scroll up to bounce - the scrolling view hangs completely before you try to scroll down without inertia. – Pontificals

Answer 3

If you apply #banner {z-index:-1} and body {background:transparent} your problem should be solved.

Maher

code.tutsplus.com/tutorials/… – Willie