Düzenim oldukça basit, yinelenen bir arka plan öğesi, birkaç dikey boşluk (yol) ve bazı yatay köprüler ve sürmesi gereken küçük bir araba Kaydettiğinizde bunların altında.Bir iOS aygıtında kaydırma yaparken, öğelerin z-endeksi çalışmıyor
Her şey Mac'imde, ancak iOS aygıtlarında çalışıyor — test aygıtlarım: iOS 6.1'de iPhone 4, iOS 6.1.3'teki iPad 2 - kaydırma etkinliği etkin olduğunda z-index onurlandırılmıyor.
Bu
kayarken,window için
position: fixed olan otomobil, olması gerektiği gibi köprü yüksek yapım
z-index yerine ("otomobil" den
z-index yüksek olan) köprü üzerinde hareket demektir ve arabayı köprünün altından yapan iOS olmayan tarayıcılarda.
Basit bir katmanlama sorunu gibi görünüyor, ancak çok basitleştirilmiş bir test durumu ile bile hata hala belirgindir.
Test durumda:
kimse koduyla neyin yanlış olduğunu biliyor mu
http://plnkr.co/EAE5AdJqJiuXgSsrfTWH (demo içeriğiyle ilgili olmayan bir iframe kaydırma sorunu önlemek için iPad'de tam ekran görüntüle) neden olur kaydırma etkinkenz-index çalışmıyor mu? Not: Bu, hem iOS'ta hem de yerel Mobil Safari'de gerçekleşir.
İşte yukarıdaki durumda birileri demo açmadan bir düzeltme işaret edebilir bağlantılı reduced test case çalışan kodun parçalarıdır.
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;
}
Bu soruya başka birinin gelmesi durumunda… asıl soru tamamen cevaplandırılmasa bile (normal z-indeks yığınlama sırasının neden doğru kullanılmadığını hala bilmiyorum) çalışmak için arka plan öğeleri ve aracın kendisi için negatif bir z-endeksi kullanıyor. Dolayısıyla araç negatiftir, üstgeçit/köprü pozitif bir z dizini üzerindedir ve daha sonra iOS doğru bir şekilde işler. – Jannis
Ben aynı sorunu yaşıyorum ve negatif z-endeksi çözüm gerçekten hile yapar ama ne yazık ki başka bir sorun ortaya çıkarır: etiketleri negatif z-endeksleri linkleri kırar. Yine de paylaştığın için teşekkürler, eğer bir şey bulursam parçamı yapacağım ama şu anda sıkışıp kaldım. – ChristopherC
Bir geçici çözüm aramaya devam ediyorum, ancak bu arada burada bazı soruşturmaların sonuçları var: http://plnkr.co/aeubN4 Eğer haklıysam, bu konuda yapabileceğimiz bir şey olup olmadığından emin değilim? – ChristopherC