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>

score 76 · Answer 1 · answered Aug 16 '13 at 11:54

76

Ugh amazing. Just had to add:

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

to the #content div.

answered Aug 16 '13 at 11:54

user1393984

1,319
3
13
17

1

Didn't work for me and oh boy I added translate3d(0,0,0) to all tags on which it made sense – Paul Razvan Berg Dec 14 '19 at 19:35

score 5 · Answer 2 · answered Sep 09 '13 at 13:49

5

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

answered Sep 09 '13 at 13:49

Sergiy Seletskyy

16,236
7
69
80

1

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. – Brian Cannard Jan 20 '17 at 07:02

score 2 · Answer 3 · answered Aug 16 '13 at 11:56

2

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

answered Aug 16 '13 at 11:56

cowcowmoomoo

507
2
10

https://code.tutsplus.com/tutorials/ios-5-fixed-positioning-and-content-scrolling--mobile-8332 – Mary Pieroszkiewicz Jun 02 '18 at 08:46

Fixed positioning/z-index issue in mobile safari

3 Answers3

Linked