Pourquoi n'application " - webkit-backface-visibility: hidden;' la correction des problèmes avec des marges négatives de transition sur sur ios / ipad 5.1?

J'ai trébuché sur un correctif pour résoudre mon problème par hasard - et je n'aime pas l'application de correctifs, je ne comprends pas.

<ul>
  <li><img src="something.jpg" /></li>
  <li><img src="somethingElse.jpg" /></li>
  [+12 more <li>'s]
</ul>

Un résumé de ce que je pense sont les styles css sont:

ul {
  position: absolute;
  list-style-type: none;
  top: 0;
  left: 0;
}
li {
  position: relative;
  height: 900px;
  width: 500px;
  float: left;
}
img {
  display: block;
  margin: 0 auto;
}

Le problème: Lors de l'application d'une transition qui effectue la transition à modifier l'ensemble ensemble d'images de gauche c'est à dire:

ul {
  left: -3000px;
}

il fonctionne bien partout, sauf ios 5.1, où il travaille de temps en temps, mais plus généralement au départ, il effectue la transition puis revient à l'affichage de la dernière image qu'il 'réussi' ensemble (par exemple, la première image, ou une image où la transision définir correctement).

En ajoutant ceci à la css:

ul {
  -webkit-backface-visibility: hidden;
}

rend tout fonctionne correctement. Qui n'a pas de sens pour moi, et je ne suis tombé sur tout en essayant de travailler sur la façon d'arrêter le clignotement entre les transitions.

OriginalL'auteur Caroline | 2012-12-19

  1. 9

    Je pense que je risque d'avoir travaillé sur la raison pour cela.

    La transition bibliothèque utilisée semble avoir un bug, ce qui signifie que traduire() a été utilisée pour la transition, pas translate3d() malgré qu'il soit disponible.

    Après la modification de cette, le supplément dans la règle css:

    -webkit-backface-visibility: hidden;

    n'avaient plus aucun effet - les transitions déplacé le nœud dom vers la position correcte sans elle.

    Je en déduire que la règle css en quelque sorte forcé un translate3d() la méthode pour être utilisé sur l'objet.

    Cependant, pour arrêter quelque peu irréguliers mouvement entre les images, j'ai encore besoin d'ajouter:

    ul {
  -webkit-transform: translate3d(0,0,0);
}

    Je n'ai découvert cela par essai et erreur: parsemant mon css avec les " corrections suggérées:

    -webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility:visible;

    et d'assurer que "translate3d" a été utilisé, je puis peu à peu retiré css 'bugs' jusqu'à ce qu'il était juste "- webkit-transform: translate3d(0,0,0); " était nécessaire dans un seul endroit.

    Donc une combinaison de faire le bon appel de l'animation, et d'appliquer un style css dans un endroit fait pour une bien meilleure transition, tous ensemble 🙂

    OriginalL'auteur Caroline