Podczas przewijania na urządzeniu iOS indeks elementów nie działa

Mój układ jest dość prosty, powtarzający się element tła, kilka pionowych przestrzeni (dróg) i kilka poziomych mostów i mały samochód, który powinien jechać pod nimi, gdy przewijasz.Podczas przewijania na urządzeniu iOS indeks elementów nie działa

Wszystko działa dobrze na moim Macu, ale na urządzeniach z systemem iOS - moje urządzenia testujące to: iPhone 4 na iOS 6.1, iPad 2 na iOS 6.1.3 - z-index nie jest honorowany, gdy jest aktywne wydarzenie przewijania.

To oznacza, że podczas przewijania, samochód, który jest position: fixed do window, porusza się przez most (który ma wyższą z-index niż „samochód”) zamiast z-index podejmowania most wyższy jak powinno być i jest w przeglądarkach innych niż iOS, co sprawia, że samochód jedzie pod mostem.

Wygląda na prosty problem z nakładaniem warstw, ale nawet w bardzo uproszczonym przypadku testowym błąd jest nadal widoczny.

przypadek Test: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(widok na pełnym ekranie iPada, aby uniknąć iframe scrolling problem, który nie jest związany z treścią demo)

Czy ktoś wie co się dzieje z kodem, który spowoduje z-index nie działa podczas gdy przewijanie jest aktywne?

Uwaga: Dzieje się tak zarówno w Chrome na iOS, jak i natywnej wersji mobilnej Safari.

Oto bity kod uruchomiony na reduced test case I połączone powyżej, w przypadku gdy ktoś może wskazać poprawkę bez otwierania 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; 
}

Źródło

2013-04-16 Jannis

Na wszelki wypadek, gdy ktoś inny natknie się na to pytanie ... podczas gdy oryginalne pytanie nie zostało w pełni zaspokojone (wciąż nie wiem, dlaczego normalna kolejność układania z-index nie jest właściwie używana), rozwiązanie problemu do pracy używa ujemnego indeksu Z dla elementów tła i samego samochodu. Samochód jest ujemny, wiadukt/mostek znajduje się na pozytywnym indeksie Z, a następnie iOS renderuje go poprawnie. – Jannis

Mam ten sam problem, a Twoje negatywne z-index rozwiązanie rzeczywiście lewę, ale niestety podnosi inny problem: negatywne indeksy z na tagów łamie linki. Dzięki za podzielenie się, zrobię swoją część, jeśli coś znajdę, ale teraz jestem zamknięty. – ChristopherC

Wciąż szukam obejścia, ale tymczasem oto wyniki niektórych badań: http://plnkr.co/aeubN4 Jeśli mam rację, nie jestem pewien, czy jest coś, co możemy z tym zrobić? – ChristopherC

wierzę już rozwiązany ten po wielu prób i błędów. To, co zrobiłem, to dodanie do mostków webkit transform. Pozwala to na dodatnich liczb z-index (samochód na 10, dziurę po 1, mostowych na 20):

nowy CSS:

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

Dodawanie tłumaczyć na różne mosty wydają się nie tylko naprawić migotanie od wcześniej, ale także pozwala przewijać natychmiast bez żadnych opóźnień.

Sprawdź to w full screen lub full Plunker. Testowane na iPadzie iOS 6.0.1.

Źródło

2013-08-14 18:58:50

Zacząłem się poddawać po kilku dniach zmagań, ale twoje rozwiązanie działa świetnie także w moim przypadku, dzięki! – ChristopherC

Błąd Bizzare, twoje rozwiązanie naprawiło to także dla nas! –

Cieszę się, że mogę pomóc! –

Podczas przewijania na urządzeniu iOS indeks elementów nie działa

Odpowiedz

Powiązane problemy