iOS क्रोम दस्तावेज़ की गलत ऊंचाई की गणना करता है

Question

पृष्ठ की पूरी ऊँचाई को भरने के लिए, मैं height: 100%;html और बॉडी टैग्स का उपयोग करता हूं , और यह तब तक ठीक रहता है जब तक कि एक ब्राउज़र बंद और पुनः चालू नहीं हो जाता। (मोबाइल उपकरणों पर मुद्दों के कारण मैं 100vh का उपयोग नहीं करता हूं https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-v अदृश्य-part-of-the-document-in -some-mobile-browser.html )

प्रजनन करने कि प्रक्रिया:

• IPhone पर Google Chrome में https://angelika94.github.io/rick/ खोलें (आप देखेंगे कि नेविगेशन (मोर्टी और बीयर) पृष्ठ के निचले भाग पर है) नेविगेशन के साथ css रिक का स्क्रीनशॉट
• ब्राउज़र को बंद करें और इसे मल्टीटास्किंग नेविगेशन से हटा दें: https://support.apple.com/en-us/HT201330
• फिर से ब्राउज़र खोलें (आप देखेंगे कि नीचे का नेविगेशन "पहली स्क्रीन" से दूर चला गया है और अब आपको इसे देखने के लिए स्क्रॉल करने की आवश्यकता है) नेविगेशन के बिना सीएसएस रिक का स्क्रीनशॉट

पृष्ठ इन मामलों में खुद तय हो जाएगा:

• अद्यतन पृष्ठ
• डिवाइस को लैंडस्केप में घुमाएं
• टैब द्वारा ब्राउज़र का खुला और बंद होना
• मल्टीटास्किंग नेवी में इसे बंद किए बिना ब्राउजर को बंद करें और फिर से खोलें

क्यों होता है? मैं इस व्यवहार को कैसे ठीक कर सकता हूं?

आपका अग्रिम में ही बहुत धन्यवाद!

Comments

अधिक जानकारी यहाँ की जरूरत है। आप एक कोड नमूना पोस्ट कर सकते हैं? बाकी सीएसएस / html मार्कअप मुद्दों में योगदान दे सकता है, न कि केवल ऊंचाई और मंच

— राहेल गैलेन

जिज्ञासु - आपके उदाहरण में, आप .linksdiv को बदल सकते हैं position: absolute। क्या यह आपके द्वारा देखे जा रहे व्यवहार को बदल देता है? (मेरे पास परीक्षण करने के लिए iphone नहीं है)

— slynagh

यहाँ आपका कोड उदाहरण @Rachel Gallen है।

— एरोन 3219

इसके अलावा, अपने फोन को लैंडस्केप मोड में और फिर से वापस घुमाने की कोशिश करें। यह तय हो जाएगा। मुझे लगता है कि यह Chrome के साथ एक मुद्दा है न कि HTML / CSS। यह केवल Chrome में दिखाई देता है और आपको जिस राशि को स्क्रॉल करना है, वह सही मात्रा में पिक्सेल ब्राउज़र के नीचे और ऊपर पट्टी है, यदि आप उन्हें संयोजित करते हैं।

— एरोन 3219

@slynagh नहीं यह नहीं है।

— एरोन 3219

Answer 1

मेरे पास एक बहुत अलग मुद्दा था, लेकिन मुझे लगता है कि मैंने जो समाधान किया है वह आपकी स्थिति के लिए भी काम कर सकता है, क्योंकि आपने पृष्ठ को अपडेट करने का उल्लेख किया था।

इसलिए मेरे पास एंड्रॉइड पर क्रोम के साथ समस्या थी, जहां यदि आप बहुत जल्दी स्क्रॉल करते हैं (मोबाइल पर असामान्य नहीं), तो कुछ तत्व फिर से पेंट / पेंट करने में विफल होंगे। एक समाधान के लिए हर जगह खोजा गया लेकिन कुछ भी नहीं मिल सका जो काम करेगा।

अंत में, मुझे एक काम ठीक लगा:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

तो यह जो करता है वह पेज को 3 सेकंड के चक्र पर लगातार निरस्त करने के लिए मजबूर करता है।

शायद मुझे इसे हर 2 सेकंड में केवल एक सेकंड के एक अंश के लिए शिफ्ट करना चाहिए, बजाय लगातार:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

मैंने कुछ तत्वों पर प्रभाव डालने की कोशिश की zoom: 99.99999;, 1लेकिन कुछ हॉवर प्रभावों पर 1 से ऊपर के पैमाने को परिवर्तित करने से जूम श्वास दिखाई देती है। तो 99.99999 से 99.99998 तक प्रभाव को अदृश्य बनाने के लिए मेरे लिए क्या काम किया गया था।

थोड़ा हैसी समाधान जो बहुत लंबे पृष्ठों के लिए प्रदर्शन के मुद्दों को प्रस्तुत कर सकता है, लेकिन शायद नहीं, क्योंकि ब्राउज़र को केवल वही होना चाहिए जो ऑनस्क्रीन है। जिन पृष्ठों पर मैंने इसका उपयोग किया है वे बहुत अधिक जटिल बहु-परत प्रभावों के साथ रेखीय रूप से भारी हैं, और यह ध्यान देने योग्य प्रदर्शन प्रभाव नहीं लगता है।

कई मोबाइल ब्राउज़रों की तरह लगता है अत्यधिक अनुकूलित प्रतिपादन है, जो कुछ अच्छी तरह से प्रलेखित सुधार के साथ विचित्र विफलताओं की ओर जाता है। जबरदस्ती repaints मुझे मिला एकमात्र काम फिक्स था।

मैंने अन्य की कोशिश की, थोड़ा कम आक्रामक, प्रलेखित मजबूर करने के तरीके। जैसे 200ms के लिए स्टॉप स्क्रॉल करने के बाद पृष्ठ पर (अदृश्य रूप से) कुछ पाठ जोड़ना, और ऐसे। हालांकि कुछ भी काम नहीं किया, इस प्रकार मेरा चेतन-संपूर्ण पृष्ठ हमेशा के लिए हैक हो गया।

आपके मामले में, उन अन्य हैक में से कुछ बेहतर काम कर सकते हैं। यह लेख उन सभी विभिन्न चीजों की रूपरेखा तैयार करता है, जो रिपींट / रिफ्लोज़ का कारण बनती हैं ताकि आप स्क्रिप्ट के माध्यम से इनमें से कुछ चीजों को करने की कोशिश कर सकें।