आईओएस

पर स्क्रॉल करते समय निश्चित पृष्ठभूमि पर सफेद क्षेत्र मेरा लक्ष्य आईओएस/एंड्रॉइड पर स्केल की गई पृष्ठभूमि होना है जिसे उपयोगकर्ता स्क्रॉल डाउन करने के बाद पुन: सहेजना नहीं है (और पता बार गायब हो जाता है)। मुझे उपयोगी उत्तरों के साथ कई प्रश्न मिले लेकिन किसी भी तरह से मैं अपने आईफोन पर परेशान व्यवहार करता रहा। मैं बूटस्ट्रैप का उपयोग करता हूं।आईओएस

यहाँ मेरी सरलीकृत एचटीएमएल

<html> 
<body> 
    <div id="background-img"></div> 
    <div id="layout" class="container"> 
    <div id="content-main" class="col-xs-12"> 
     <p>Some text here</p> 
    </div> 
</div> 
</body> 
</html>

यहाँ मेरी सीएसएस

html { 
    height: 100%; } 

body { 
    position: relative; 
    /* required for scrollspy */ 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-size: 30px; 
    font-weight: normal; 
    height: 100%; 
    color: white; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    /* smooth scrolling on ios */ } 

#background-img { 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: -80px; 
    position: fixed; 
    z-index: -1; 
    background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center; 
    background-size: cover; 
} 
#content-main { //nothing fancy }

सब कुछ डेस्कटॉप पर ठीक चलाता है। लेकिन जब मैं आईओएस (क्रोम या सफारी - कोई फर्क नहीं पड़ता) पर साइट खोलता हूं तो मुझे स्क्रॉल करते समय स्क्रीन के नीचे एक सफेद बार मिलता है। स्क्रॉलिंग बंद होने पर बार गायब हो जाता है। आप इसे अपने मोबाइल पर आजमा सकते हैं: https://jsbin.com/rudetokoxu

मैंने यहां पोस्ट किए गए समाधानों का प्रयास किया: CSS background stretches to fill height in iOS but there is white space on scroll। यहां समाधान तार्किक लगता है। मैंने पृष्ठभूमि div की ऊंचाई को 200% तक सेट करने की कोशिश की लेकिन इसका कोई फायदा नहीं हुआ।

भी करने की कोशिश की: mobile IOS Google chrome address bar behaviour और यहाँ: Background image jumps when address bar hides iOS/Android/Mobile Chrome js समाधान सहित (ऐसा लग रहा था कि उनमें से कुछ अब और काम नहीं किया तो मैं सब js समाधान की कोशिश नहीं की) और कुछ और मैं इस विषय पर मिल सकता है

कृपया मदद मुझे इस का समाधान या मुझे कभी समझाने इस तरह की छोटी चीज़ें anoying बारे में दो बार सोचने के लिए (क्योंकि जीवन उनमें से भरा हुआ है :-))

Btw: इस साइट मोबाइल पर एक ही समस्या है: http://www.laregiondesmusees.fr, लेकिन यह साइट पीड़ित नहीं है: http://www.heartkids.co.nz

स्रोत

2015-09-05 jzp74

मुझे आपका दर्द महसूस होता है। यदि आप उदाहरण पर ध्यान से देखते हैं कि आपने पाया कि वहां कोई सफेद स्पेस समस्या नहीं थी (http://www.heartkids.co.nz) - जवाब वहां था, लेकिन जब तक आप यह नहीं जानते कि आप क्या खोज रहे हैं, तब तक खोजना मुश्किल है।

आप देखेंगे कि उन्होंने पृष्ठभूमि छवि पर 2 डी ट्रांसफ़ॉर्म लागू किया है। ज्यादातर मामलों में पृष्ठभूमि छवियों के साथ निश्चित divs पर 2 डी या 3 डी ट्रांसफॉर्म लागू करने से इस तरह की अवांछित सफेद जगह से छुटकारा मिलता है।

इस सीएसएस को उस परेशान सफेद बार को हटा देना चाहिए। चीयर्स।

.background-img { 
    transform: translate3d(0,0,0); 
}

स्रोत

2015-10-20 20:20:56 user3621874

देर से उत्तर की बिट लेकिन धन्यवाद! ऐसा लगता है कि आईओएस पर क्रोम और सफारी दोनों में मैंने जो व्यवहार देखा वह अब क्रोम में मौजूद नहीं है। मैं अभी भी सफारी में पुन: पेश कर सकता हूं लेकिन मेरे मूल पोस्ट में उल्लिखित कुछ अन्य युक्तियों के साथ संयोजन में आपका सुझाव समस्या को ठीक करता है। – jzp74

इस उत्तर के लिए बहुत बहुत धन्यवाद। 1000 के जेएस की तुलना में बहुत बेहतर है। चीयर्स! –

उत्तर

संबंधित मुद्दे