web-dev-qa-db-fra.com

Position de safari mobile: pépin d'index z fixe lors du défilement

Je sais que les iPhones utilisaient pas position de support: fixe, mais maintenant c'est le cas et je vois un problème étrange lorsque je fais défiler un élément de position fixe derrière d'autres éléments avec un indice z plus élevé. L'élément de positions fixes avec l'indice z inférieur apparaît momentanément devant, ce qui semble vraiment mauvais. Est-ce qu'il y a un moyen d'éviter cela?

J'ai essayé d'ajouter -webkit-transform: translate3d(0, 0, 0); à l'élément fixe et cela ne semble pas résoudre ce problème.

Voici également un jsfiddle.

Mise à jour J'ai ajouté transform:translateZ(x) en plus du z-index et cela n'a pas résolu le problème.

Update2 J'ai ajouté -webkit préfixe et cela résout le problème de z-index sur un Safari mobile, mais provoque également la position: fixed à fonctionner incorrectement dans le bureau Chrome.

iosiphonecssmobile-safari
32
emersonthis

z-index n'est pas fiable avec position: fixed, comme indiqué dans ce violon: http://jsfiddle.net/mZMkE/2/ utilisez plutôt la transformation translateZ.

transform:translateZ(1px);

sur vos éléments de page.

EDIT: Dans votre code, ajoutez ce css:

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

puis supprimez les références z-index de ces éléments et .intro.

36
tnt-rox

Mise à jour 1: J'ai ajouté transform:translateZ(x) en plus du z-index Et cela n'a pas résolu le problème.

Mise à jour 2: J'ai ajouté le préfixe -webkit- Et cela résout le problème de z-index sur Safari mobile, mais provoque également le fonctionnement incorrect de position:fixed Dans Chrome de bureau. "

Essayez ensuite d'envelopper -webkit-transform:translateZ(x) dans une requête multimédia spécifique au mobile.
Par exemple:

@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
    .whatever {
        -webkit-transform: translateZ(x)
    }
}

Dans ce cas, cela ne fera rien sur le bureau Chrome

5
Barna Tekse

J'ai essayé la solution acceptée comme réponse dans un cas spécifique lorsque je devais définir une position différente dans la pile de différentes couches, mais cela ne fonctionnait pas à la fois dans les navigateurs de bureau (firefox et chrome) et Safari iOS

Je suis sorti avec ce hack qui utilise à la fois translateZ et z-index pour chaque div, qui fonctionne sur ces plateformes. L'ordre de translateZ et z-index est important. Pour définir la position de chaque couche est

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative; 
z-index: 1;

J'ai utilisé la même valeur pour le z-index et translateZ juste pour la cohérence, ce n'est pas nécessaire. Voir l'exemple de travail http://jsbin.com/peyehufo/5

2
cagnarrogna

Je ne préconise pas cette solution, mais c'est la meilleure que j'ai en ce moment ...

Afin de reproduire l'effet du z-index avec la position fixée sur un iPhone, il semble nécessiter deux techniques ensemble:

  1. Comme suggéré par @tnt ci-dessus, utilisez transform:translateZ(n) où z-index est utilisé pour que Safari mobile gère correctement l'ordre de la pile. Cela semble avoir l'effet secondaire malheureux de provoquer la position: fixe pour arrêter de travailler ...

  2. Au lieu de position: fixed, utilisez une technique javascript comme celle-ci pour le simuler.

Je n'ai pas testé cela à fond (parce que je ne vais pas le faire), mais cela semble fonctionner assez bien. Bien que l'élément "fixe" semble bégayer un peu.

2
emersonthis