Fixed positioning/z-index issue in mobile safari
60,643
Solution 1
Ugh amazing. Just had to add:
-webkit-transform: translate3d(0,0,0);
to the #content div.
Solution 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);
}
Solution 3
If you apply #banner {z-index:-1}
and body {background:transparent}
your problem should be solved.
Author by
user1393984
Updated on November 04, 2020Comments
-
user1393984 over 3 years
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>