आईओएस 7 मोबाइल सफारी

Question

में गायब स्थिति फिक्स्ड हेडर मैं पूरे दिन इस पर गड़बड़ कर रहा हूं और एक फिक्स नहीं ढूंढ पा रहा हूं।

body { 
    width: 100%; 
    height: 100%; 
    min-height: 100%;  
} 

.stream .header { 
    position: fixed; 
    width: 100%; 
    height: 41px; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 10; 
    margin-bottom: 10px; 
    list-style: none; 
    } 

शीर्षक के नीचे सामग्री निम्नलिखित सीएसएस है:

.stream .stream-content { 
    position: relative; 
    padding-top: 41px; 
    -webkit-transform: translate3d(0, 0, 0); 
} 

जब पेज है

मैं एक साधारण उल कि निम्नलिखित सीएसएस के साथ एक निश्चित हेडर के रूप में कार्य करता है मिल गया है iOS7 मोबाइल सफारी में स्क्रॉल, निम्न होता है:

• पहले स्क्रॉल नीचे -स्क्रॉलिंग पूर्ण होने तकशीर्षलेख पृष्ठ शीर्ष ठीक के साथ चलता है।

• दूसरा स्क्रॉल डाउन - हेडर पूरी तरह से गायब हो जाता है और स्क्रॉलिंग पूर्ण होने पर फिर से दिखाई नहीं देता है।

• स्क्रॉल अप (शीर्षलेख अभी भी दिखाई देता है) - हेडर पूरी तरह से गायब हो जाता है और पृष्ठ के शीर्ष तक पहुंचने पर फिर से दिखाई नहीं देता है।

• स्क्रॉल अप (हेडर छुपा हुआ है) - हेडर छुपा रहता है और पृष्ठ के शीर्ष पर पहुंचने पर फिर से दिखाई नहीं देता है।

• स्क्रॉल अप (पहले से ही शीर्षलेख वाले पृष्ठ के शीर्ष पर) - हेडर फिर से दिखाई देता है और पृष्ठ को दो बार स्क्रॉल होने तक सामान्य रूप से कार्य करता है।

मैं iOS6 मोबाइल सफारी के साथ इस मुद्दे नहीं होने दिया गया था, इसलिए इस मुद्दे को नया यूआरएल बार स्क्रॉल पर आकार बदलने से संबंधित लगता है।

किसी और को भी इसी तरह के मुद्दे हैं? सुझाव स्वागत है।

अद्यतन:

तो ऐसा लगता है कि शीर्ष लेख की मूल (.stream) पर दूर करने -webkit-transform3d() मुद्दा निकाल देता है, तो वहाँ एक संघर्ष तरह से माता पिता div गाया जा रहा है होना चाहिए और अंदर हेडर।

फिर भी आसपास के आसपास एक काम की तलाश में है।

Answer 1

मुझे एक ही समस्या हो रही थी, ऐसा लगता है कि पृष्ठ के अंदर बहुत अधिक होने पर यह एक बग होता है, मैं इसे निम्न स्थिति कोड को निश्चित स्थिति तत्व में जोड़कर इसे ठीक करने में सक्षम था, (transform: translateZ(0);-webkit-transform: translateZ(0);) जो ब्राउज़र को पिक्सेल फ्लाई बनाने के लिए डिवाइस की ग्राफ़िकल प्रोसेसिंग यूनिट (जीपीयू) तक पहुंचने के लिए हार्डवेयर त्वरण का उपयोग करने के लिए मजबूर करता है। दूसरी ओर, वेब अनुप्रयोग, ब्राउज़र के संदर्भ में चलते हैं, जो सॉफ़्टवेयर को प्रतिपादन के अधिकांश (यदि नहीं सभी) करने देता है, जिसके परिणामस्वरूप संक्रमण के लिए कम अश्वशक्ति होती है। लेकिन वेब पकड़ रहा है, और अधिकांश ब्राउज़र विक्रेता अब विशेष सीएसएस नियमों के माध्यम से ग्राफिकल हार्डवेयर त्वरण प्रदान करते हैं।

का उपयोग -webkit-transform: translate3d (0,0,0); सीपीयू संक्रमण के लिए जीपीयू को कार्रवाई में लाएगा, जिससे उन्हें चिकनी (उच्च एफपीएस) बना दिया जाएगा।

नोट: translate3d (0,0,0) आप जो देखते हैं के संदर्भ में कुछ नहीं करता है। यह ऑब्जेक्ट को एक्स, वाई और जेड अक्ष में 0px द्वारा स्थानांतरित करता है। हार्डवेयर त्वरण को मजबूर करने के लिए यह केवल एक तकनीक है।

#header { 
    position: fixed; 
    /* MAGIC HAPPENS HERE */ 
    transform: translateZ(0); 
    -moz-transform: translatez(0); 
    -ms-transform: translatez(0); 
    -o-transform: translatez(0); 
    -webkit-transform: translateZ(0); 
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */ 
} 

Answer 2

मैं iPad के साथ ही समस्या का सामना करना पड़ा। मैंने जेएस भाग में आईपैड के लिए कोड जोड़कर कोशिश की:

if(navigator.userAgent.match(/iPad/i)) { 
    //written code to scrolldown the header part 
} 

यह मेरे लिए काम करता है।