आईओएस 8

Question

पर नई फिक्स्ड पोजिशन बग मेरे पास एक निश्चित हेडर और स्लाइड-आउट साइडबार वाली साइट है। पोर्ट्रेट अभिविन्यास में आईओएस 7 के साथ, साइडबार दिखाई देने पर निश्चित हेडर तय रहता है, लेकिन आईओएस 8 पर हेडर स्क्रॉल किए जाने के आधार पर थोड़ा ऊपर की तरफ धक्का देता है। मुझे इसे तय रहने की ज़रूरत है। http://jsbin.com/xuyevi/2/

मुख्य टुकड़े एक हैडर, एक साइडबार, और मुख्य सामग्री हैं:

इस jsbin देखें। हेडर को निश्चित स्थिति का उपयोग कर स्क्रीन के शीर्ष पर तय किया गया है और इसमें एक जेड-इंडेक्स है जो स्क्रॉल करते समय सामग्री से ऊपर रखता है।

साइडबार स्क्रीन के बाईं ओर तय किया गया है, और शुरुआत में अपनी चौड़ाई से बायीं तरफ अनुवाद किया जा रहा है।

साइडबार खोलने के लिए, प्रत्येक शीर्षलेख, सामग्री और साइडबार का साइडबार की चौड़ाई से दाईं ओर अनुवाद किया जाता है।

फिर से, यह आईओएस 7 और अनुवादक 3 डी का समर्थन करने वाले अन्य सभी ब्राउज़रों पर पूरी तरह से काम करता है, और यह परिदृश्य अभिविन्यास में आईओएस 8 में भी सही तरीके से काम करता है। लेकिन पोर्ट्रॉइड में आईओएस 8 में, फिक्स्ड हेडर स्क्रीन को स्लाइड करेगा, इस पर आधारित है कि उपयोगकर्ता कितनी दूर स्क्रॉल किया गया है।

आगे, सफारी निरीक्षक का उपयोग करके पता चलता है कि स्क्रीन पर मेनू आइटम उनकी अपेक्षित स्थितियों से ऑफसेट होते हैं। अर्थात। इंस्पेक्टर में एक तत्व का चयन स्क्रीन पर एक क्षेत्र को हाइलाइट करता है जो वास्तविक स्थान से ऑफसेट होता है जहां इसे प्रस्तुत किया जाता है।

क्या कोई और इसमें भाग लेता है? किसी को भी एक फिक्स पता है?

संपादित करें: इंस्पेक्टर सोचता है कि निश्चित स्थिति शीर्षलेख बिल्कुल ठीक है, भले ही यह वास्तव में स्क्रीन को धक्का दे रहा हो।

Answer 1

मैं कुछ ऐसा करने की कोशिश कर रहा था (here और here देखें) तो पाया कि ऐप्पल ने technical note प्रकाशित किया है कि निश्चित स्थिति से बचा जाना चाहिए। मैं कसम खाता हूं कि यह आईओएस 7 में ठीक काम करता है, लेकिन अब आईओएस 8 के साथ यह अब "चिपकता" नहीं है।

यह समस्या लगता है बारीकी से इस मेटा टैग निर्धारित करने से संबंधित:

<meta name="viewport" content="width=device-width"> 

भी देखें: Fix div to bottom without using css position

Answer 2

मैं कई स्थिर स्थिति तत्वों और एक सीएसएस का उपयोग कर iOS पर एक ऐसी ही समस्या हुई एनिमेटेड ऑफ कैनवास एनएवी । एक लंबे पृष्ठ पर ऊपर की तरफ "बहाव" एक अवरोधक था क्योंकि यह अंततः उस बिंदु तक बढ़ गया जहां यह नेविगेशन ट्रिगर को छुपाया, जिससे मेनू को बंद करना असंभव हो गया। मैंने एक फिक्स खोजने और वर्कअराउंड पर बसने के लिए बड़े पैमाने पर प्रयास किया: एनिमेट करने से पहले शीर्ष पर वापस स्क्रॉल करें। (#ocnTrigger मेरी ऑफ कैनवास मेनू ट्रिगर है।)

$('#ocnTrigger').click(function(){ 
    $('body').animate({ 
     scrollTop: 0 
    }, 0); 
}); 

Answer 3

एक छोटी सी पार्टी के लिए देर हो चुकी है, लेकिन

html, body { 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

जोड़ने तय तत्वों को ऑफसेट कर रहे हैं (पर स्क्रॉल ऑफसेट जैसे। बाईं तय करेंगे : 20 पीएक्स) आईओएस 8.