Mein Layout ist ziemlich einfach, ein sich wiederholendes Hintergrundelement, ein paar vertikale Räume (Straßen) und einige horizontale Brücken und ein kleines Auto, das fahren sollte unter ihnen, wenn Sie scrollen.Beim Scrollen auf einem iOS-Gerät funktioniert der Z-Index der Elemente nicht
Alles funktioniert gut auf meinem Mac, aber auf iOS-Geräten - meine Testgeräte sind: iPhone 4 auf iOS 6.1, iPad 2 auf iOS 6.1.3- die z-index wird nicht geehrt, wenn das Scroll-Ereignis aktiv ist.
Dies bedeutet, dass, wie Sie bewegen, das Auto, das position: fixed zum window ist, über die Brücke bewegt sich eher als die z-index machen die Brücke höher als es (was eine höhere z-index als die „Auto“ hat) sein sollte, und ist auf Nicht-iOS-Browsern, die das Auto unter der Brücke fahren lässt.
Es scheint wie ein einfaches Layering-Problem, aber selbst mit einem sehr vereinfachten Testfall ist der Bug immer noch offensichtlich.
Testfall: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(Ansicht in Vollbild auf dem iPad ein iframe Scrollen Problem zu vermeiden, das nicht auf den Demo-Content verwendet ist)
Wer weiß, was mit dem Code falsch ist, die dazu führen würde, Die z-index funktioniert nicht, während der Bildlauf aktiv ist?
Hinweis: Dies geschieht sowohl auf Chrome für iOS als auch auf dem nativen Mobile Safari.
Hier sind die Code-Bits auf dem reduced test case läuft ich oben bei verknüpft jemand ein Update ohne Öffnen der Demo kann darauf hinweisen.
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;
}
Nur für den Fall, dass jemand auf diese Frage stolpert ... während die ursprüngliche Frage nicht vollständig beantwortet wurde (ich weiß immer noch nicht, warum die normale Z-Index-Stapelreihenfolge nicht richtig verwendet wird) die Lösung, Dinge zu bekommen zu arbeiten verwendet einen negativen Z-Index für Hintergrundelemente und das Auto selbst. Also Auto ist negativ, Überführung/Brücke ist auf einem positiven Z-Index und dann iOS macht es richtig. – Jannis
Ich habe das gleiche Problem und Ihre negative Z-Index-Lösung tut in der Tat den Trick, aber es wirft leider ein anderes Problem: negative Z-Indizes auf Tags bricht die Links. Vielen Dank für das Teilen, ich werde meinen Teil tun, wenn ich etwas finde, aber ich stecke jetzt fest. – ChristopherC
Ich suche weiter nach einem Workaround, aber mittlerweile sind hier die Ergebnisse einiger Untersuchungen: http://plnkr.co/aeubN4 Wenn ich richtig bin, bin ich mir nicht sicher, ob wir irgendetwas dagegen tun können? – ChristopherC