Il mio layout è abbastanza semplice, un elemento di sfondo ripetuto, un paio di spazi verticali (strade) e alcuni ponti orizzontali e una piccola auto che dovrebbe guidare sotto di loro quando si scorre.Durante lo scorrimento su un dispositivo iOS, lo z-index degli elementi non funziona
Tutto funziona perfettamente sul mio Mac ma su dispositivi iOS: i miei dispositivi di test sono: iPhone 4 su iOS 6.1, iPad 2 su iOS 6.1.3- lo z-index non viene rispettato quando l'evento di scorrimento è attivo.
Ciò significa che mentre si scorre, l'auto, che è position: fixed al window, si sta muovendo sul ponte (che ha un più alto z-index rispetto alla "macchina") piuttosto che il z-index rendere il ponte più alto come dovrebbe essere e si trova su browser non iOS che fa passare l'auto sotto il ponte.
Sembra un semplice problema di stratificazione, ma anche con un caso di test molto semplificato il bug è ancora evidente.
caso prova: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(vista a schermo intero su iPad per evitare un problema di scorrimento iframe che non è legato al contenuto demo)
Qualcuno sa cosa c'è di sbagliato con il codice che causerebbe il z-index non funziona mentre lo scorrimento è attivo?
Nota: Questo accade su entrambi, Chrome per iOS e Safari Safari nativo.
Ecco i bit di codice in esecuzione sul reduced test case ho linkato sopra nel caso in cui qualcuno può segnalare una correzione senza aprire la demo.
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;
}
Nel caso in cui qualcun altro si imbattesse in questa domanda ... mentre la domanda originale non ha avuto una risposta completa (non so ancora perché il normale ordine di impilatura degli z-index non venga usato correttamente) la soluzione per ottenere le cose lavorare è usare uno z-index negativo per gli elementi di sfondo e l'auto stessa. Quindi la macchina è negativa, il cavalcavia/ponte è su uno z-index positivo e quindi iOS lo rende correttamente. – Jannis
Sto avendo lo stesso problema e la tua soluzione z-index negativa fa davvero il trucco ma sfortunatamente solleva un altro problema: gli indici z negativi sui tag interrompono i collegamenti. Grazie per la condivisione comunque, farò la mia parte se trovo qualcosa, ma mi sto bloccando in questo momento. – ChristopherC
Continuo a cercare una soluzione alternativa, ma nel frattempo ecco i risultati di alcune indagini: http://plnkr.co/aeubN4 Se ho ragione, non sono sicuro che ci sia qualcosa che possiamo fare al riguardo? – ChristopherC