CODEWITHSUNDEEP
htmlcssmobilesafarifixed
user1393984
user1393984

Reputation: 1329

Fixed positioning/z-index issue in mobile safari

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>

Upvotes: 39

Views: 64562

Answers (3)

Sergiy Seletskyy
Sergiy Seletskyy

Reputation: 17120

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

Upvotes: 5

cowcowmoomoo
cowcowmoomoo

Reputation: 507

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

Upvotes: 2

user1393984
user1393984

Reputation: 1329

Ugh amazing. Just had to add:

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

to the #content div.

Upvotes: 76

Related Questions