Is there an issue with the site here:
The primary content scrolls up over the countdown and under the navigation, both of which are fixed elements. This functions correctly on desktop, but on mobile Safari, the content scrolls behind the countdown when the user moves up, only to pop in front once touch is released.
I'm curious if this is a bug or something that can be resolved?
Below is the CSS code:
#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 here's the HTML 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>