Pendant le défilement sur un appareil iOS, le z-index des éléments qui ne fonctionne pas
Ma mise en page est assez simple, la répétition d'élément d'arrière-plan, un couple de verticale des espaces (routes) et certains horizontale de ponts et d'une petite voiture, ce qui devrait pousser les dessous d'eux lorsque vous faites défiler.
Tout fonctionne bien sur mon Mac, mais sur les appareils iOS —ma dispositifs de test sont les suivants: iPhone 4 sur iOS 6.1, iPad 2 sur iOS 6.1.3— le z-index n'est pas l'honneur lors de l'événement scroll est active.
Cela signifie que lorsque vous faites défiler, la voiture, qui est position: fixed à la window, est en mouvement sur le pont (qui a plus de z-index que la "voiture") plutôt que de la z-index faire le pont supérieur, comme il se doit et est non-navigateurs iOS qui rend la voiture sous le pont.
Il semble comme une simple superposition problème, mais même avec un très simplifié de cas de test, le bug est toujours apparente.
Cas de Test: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH (affichage en plein écran sur l'iPad pour éviter une iframe scrolling question qui n'est pas lié au contenu de démonstration)
Personne ne sait quel est le problème avec le code qui serait la cause de la z-index pas de travail alors que le défilement est active?
Remarque: Ce qui se passe sur les deux, Chrome pour iOS et le natif de Mobile Safari.
Voici le code bits en cours d'exécution sur le réduit de cas de test j'ai lié ci-dessus dans le cas où quelqu'un peut le point de sortir un correctif sans ouvrir la démonstration.
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;
}- Juste au cas où quelqu'un d'autre tombe sur cette question... alors que la question d'origine n'a pas été répondu entièrement (je ne sais toujours pas pourquoi la normale z-index ordre d'empilement n'est pas utilisé correctement) la solution pour obtenir des choses de travail est d'utiliser un z-index négative pour les éléments d'arrière-plan et la voiture elle-même. Si la voiture est négatif, pont/bridge est sur une note positive z-index, puis iOS rend correctement.
- Je vais avoir le même problème et votre z-index négative de la solution, en effet, le truc, mais c'est malheureusement soulève un autre problème: z négatif indices sur <a> balises rompt les liens. Merci pour le partage de toute façon, je vais faire ma part si je trouve quelque chose, mais je suis quittez coincé maintenant.
- Je continue à chercher une solution, mais en attendant, voici les résultats de certaines enquêtes: plnkr.co/aeubN4 Si je suis correct, je ne suis pas sûr si il n'y a rien que nous pouvons faire à ce sujet?
Vous devez vous connecter pour publier un commentaire.
Je crois que j'ai résolu ce problème après beaucoup d'essais et d'erreurs. Ce que j'ai fait a été d'ajouter un
webkit transformles ponts. Cela permet de z positif numéros d'index (voiture, 10, nid-de-poule, au 1, d'un pont à 20):nouveau CSS:
L'ajout de la traduire pour les différents ponts semblent non seulement corriger le scintillement de l'avant, mais aussi vous permet de vous déplacer immédiatement, sans délai.
Vérifier dans plein écran ou la plein Plunker. Testé sur iPad iOS 6.0.1.