मेरा लेआउट काफी सरल है, एक दोहराना पृष्ठभूमि तत्व, कुछ लंबवत रिक्त स्थान (सड़कों) और कुछ क्षैतिज पुलों और एक छोटी कार जो ड्राइव करना चाहिए जब आप स्क्रॉल करते हैं तो उनके नीचे।आईओएस डिवाइस पर स्क्रॉल करते समय, तत्वों का जेड-इंडेक्स काम नहीं कर रहा है
सबकुछ मेरे मैक पर बस ठीक काम करता है लेकिन आईओएस डिवाइस पर- मेरा परीक्षण डिवाइस हैं: आईओएस 6.1 पर आईफोन 4, आईओएस 6.1 पर आईपैड 2- z-index स्क्रॉल इवेंट सक्रिय होने पर सम्मानित नहीं किया जा रहा है।
इसका मतलब है कि आपके स्क्रॉल, कार है, जो है window को position: fixed, पुल के ऊपर z-index से के रूप में यह होना चाहिए पुल उच्च बनाने बढ़ रहा है बल्कि (जो "कार" की तुलना में अधिक z-index है) और गैर-आईओएस ब्राउज़र पर है जो पुल के नीचे कार ड्राइव बनाता है।
यह एक साधारण लेयरिंग मुद्दे की तरह लगता है, लेकिन यहां तक कि एक बहुत ही सरल परीक्षण मामले के साथ भी बग अभी भी स्पष्ट है।
टेस्ट मामला: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(iPad पर पूर्ण स्क्रीन में देखें एक आइफ्रेम स्क्रॉल मुद्दा जो डेमो सामग्री से संबंधित नहीं है से बचने के लिए)
किसी को भी पता है क्या कोड के साथ गलत क्या है जो कारण होगा स्क्रॉल सक्रिय होने पर z-index काम नहीं कर रहा है?
नोट: यह दोनों आईओएस और मूल मोबाइल सफारी के लिए क्रोम पर होता है।
यहाँ कोड reduced test case मैं मामले में ऊपर कोई डेमो खोले बिना एक ठीक बाहर बिंदु सकता से जुड़ा हुआ पर चल बिट्स हैं।
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>
सीएसएस:
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;
}
बस किसी और के मामले में इस सवाल पर ठोकर खाई जाती है ... जबकि मूल प्रश्न का पूरी तरह उत्तर नहीं दिया गया है (मुझे अभी भी पता नहीं है कि सामान्य जेड-इंडेक्स स्टैकिंग ऑर्डर का उपयोग क्यों नहीं किया जा रहा है) चीजों को पाने का समाधान काम करने के लिए पृष्ठभूमि तत्वों और कार के लिए एक नकारात्मक जेड-इंडेक्स का उपयोग कर रहा है। तो कार नकारात्मक है, ओवरपास/पुल एक सकारात्मक जेड-इंडेक्स पर है और फिर आईओएस इसे सही ढंग से प्रस्तुत करता है। – Jannis
मुझे एक ही समस्या है और आपका नकारात्मक जेड-इंडेक्स समाधान वास्तव में चाल है लेकिन दुर्भाग्य से यह एक और समस्या उठाता है: टैग पर नकारात्मक जेड-इंडेक्स लिंक को तोड़ देता है। वैसे भी साझा करने के लिए धन्यवाद, अगर मुझे कुछ मिल जाए तो मैं अपना हिस्सा करूंगा लेकिन मैं अभी अटक गया हूं। – ChristopherC
मैं एक कामकाज की तलाश में रहता हूं, लेकिन इस बीच यहां कुछ जांच के परिणाम हैं: http://plnkr.co/aeubN4 यदि मैं सही हूं, तो मुझे यकीन नहीं है कि इसके बारे में हम कुछ भी कर सकते हैं? – ChristopherC