html - Problema de posicionamiento fijo/z-index en safari móvil

css mobile

Question

Entonces el sitio en cuestión: http://kaye.at/baby

El contenido principal a continuación se desplaza hacia arriba en la parte superior de la cuenta atrás y debajo de la navegación, que son elementos fijos. Esto funciona bien en el escritorio, pero en el safari móvil, el contenido se desplaza detrás de la cuenta regresiva a medida que el usuario avanza, pero una vez que se lanza el toque, aparece al frente.

¿Me pregunto si esto es un error o es algo que se puede arreglar?

Aquí está el 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; }

Y HTML (estructura principal):

<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 1

Increíble. Solo tuve que agregar:

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

al # contenido div

Answer 2

Para Mobile Safari, es mejor evitar usar la posición: fijo

Asegúrese de utilizar dicho CSS para su contenedor de desplazamiento y todos los niños dentro de él

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Answer 3

Si aplica #banner {z-index:-1} y body {background:transparent} su problema debería resolverse.