Lors du défilement sur un appareil iOS, l'index z des éléments ne fonctionne pas

Ma layout est assez simple, un élément de fond répétitif, un couple d'espaces verticaux (routes) et quelques ponts horizontaux et une petite voiture qui devrait conduire sous eux lorsque vous faites défiler.

Tout fonctionne très bien sur mon Mac mais sur les appareils iOS: mes périphériques de test sont: iPhone 4 sur iOS 6.1, iPad 2 sur iOS 6.1.3- l' z-index n'est pas respecté lorsque l'événement de défilement est actif.

Cela signifie que lorsque vous faites défiler, la voiture, qui est position: fixed à la window , se déplace sur le pont (qui a un z-index plus z-index que la "voiture") plutôt que sur l' z-index ce qui augmente le pont devrait être et est sur les browsers non-iOS qui rend la voiture sous le pont.

Cela ressemble à un simple problème de superposition, mais même avec un cas de test très simplifié, le bug est toujours apparent.

Test case: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH (affichage en plein écran sur iPad pour éviter un problème de défilement iframe qui n'est pas lié au contenu de la démo)

Est-ce que quelqu'un sait ce qui ne va pas avec le code qui ferait que l' z-index ne fonctionne pas alors que le scroll est actif?

Remarque: Cela se produit à la fois sur Chrome pour iOS et sur Mobile Safari natif.

Voici les bits de code qui s'exécutent sur le cas de test réduit auquel j'ai lié ci-dessus au cas où quelqu'un pourrait pointer un correctif sans ouvrir la démo.

HTML:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="car"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> <div class="bridge"></div> <div class="street"></div> </body> </html>

CSS:

 body { /* Adds the 'road' as a background image. */ background: #8BA341 url("http://f.cl.ly/items/1r2g152h2J2g3m1e1V08/road.png") repeat-y top center; margin: 0; padding: 0; } .car { /* The car's position is fixed so that it scrolls along with you. */ position: fixed; top: 5%; left: 52%; width: 220px; height: 330px; background: #BD6C31; z-index: 1; } .street { /* Empty in the example, just used to space things out a bit. */ position: relative; height: 500px; } .bridge { /* A bridge crossing the main road. The car should drive under it. */ position: relative; height: 353px; /* Image of repeating road. */ background: url("http://f.cl.ly/items/0u0p2k3z45242n1w3A0A/bridge-road.png") repeat-x center left; /* Higher z-index than car. */ z-index: 2; }

Je crois que j'ai résolu cela après beaucoup d'essais et d'erreurs. Ce que j'ai fait était d'append une webkit transform aux ponts. Cela permet d'get des nombres d'index z positifs (voiture à 10, nid de poule à 1, pont à 20):

nouveau CSS:

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

Ajout de la traduction aux différents ponts semble non seulement corriger le scintillement d'avant, mais vous permet également de faire défiler immédiatement sans timeout.

Vérifiez-le en plein écran ou dans le Plunker complet . Testé sur iPad iOS 6.0.1.