web-dev-qa-db-fra.com

Correction du problème de positionnement / z-index dans le safari mobile

Donc le site en question: http://kaye.at/baby

Le contenu principal ci-dessous défile vers le haut du compte à rebours et sous la navigation, qui sont tous deux des éléments fixes. Cela fonctionne bien sur le bureau, mais sur le safari mobile, le contenu défile derrière le compte à rebours lorsque l'utilisateur se déplace vers le haut, mais une fois que le toucher est relâché, il apparaît devant.

Vous vous demandez simplement s'il s'agit d'un bug ou si quelque chose peut être corrigé?

Voici le 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; }

Et HTML (structure principale):

<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>
htmlcssmobilesafarifixed
30
user1393984

Super étonnant. Je n'ai eu qu'à ajouter:

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

à la div #content.

64
user1393984

Pour Mobile Safari, il vaut mieux éviter d'utiliser la position: fixe

Assurez-vous d'utiliser un tel CSS pour votre conteneur de défilement et tous les enfants à l'intérieur

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

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

Si vous postulez #banner {z-index:-1} et body {background:transparent} votre problème doit être résolu.

2
cowcowmoomoo