Fixed positioning/z-index issue in mobile safari

user1393984 picture user1393984 · Aug 16, 2013 · Viewed 56.9k times · Source

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>

Answer

user1393984 picture user1393984 · Aug 16, 2013

Ugh amazing. Just had to add:

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

to the #content div.