पृष्ठ के दाईं ओर सफेद स्थान दिखाई दे रहा है जब पृष्ठभूमि छवि पृष्ठ की पूरी लंबाई का विस्तार करना चाहिए [बंद]

Question

हमारे वेबपेज की पृष्ठभूमि छवियों में फ़ायरफ़ॉक्स के साथ-साथ आईओएस पर आईपैड / आईफ़ोन में सफ़ेद स्थान के साथ पृष्ठ के दाईं ओर दिखाई देने वाली समस्याओं का सामना करना पड़ रहा है।

पृष्ठभूमि की छवियां अन्य ब्राउज़रों पर ठीक होती हैं, लेकिन हमें उन ब्राउज़रों पर ब्राउज़र की पूरी लंबाई का विस्तार नहीं करने में कठिनाई हो रही है।

फायरफॉक्स पर हमारी साइट पर एक नज़र डालें कि मेरा क्या मतलब है।

Comments

यदि आप बूटस्ट्रैप या फाउंडेशन जैसे एक फ्रेमवर्क का उपयोग कर रहे हैं, तो जांच लें कि अब स्तंभ शरीर का पहला बच्चा है, लेकिन किसी अन्य div में नेस्टेड है जिसमें कुछ प्रकार की पैडिंग (छोटे -12 fe) हैं।

— Lightningsoul

क्या आपने इसे @Dave से हल किया है?

— गमरू

पागल, है ना। 6 साल बाद, और iOS सफारी अभी भी इस समस्या को दिखा रहा है। मैंने कई सीएसएस समाधानों की कोशिश की, लेकिन अंततः jQuery का उपयोग करना पड़ा। stackoverflow.com/a/45009357/391605

— माइक गल्डहिल

Answer 1

मैंने कहा:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

अपने सीएसएस में अन्य वर्गों के ऊपर बहुत ऊपर है और यह आपके मुद्दे को ठीक करने के लिए लग रहा था।

आपकी अपडेटेड .css फ़ाइल यहाँ उपलब्ध है

Comments

कमाल है, कि बस मेरे लिए एक बग तय किया है जो मुझे थोड़ी देर के लिए परेशान कर रहा है!

— gleddy

मुझे इस कोड के साथ सफारी iPhone पर स्क्रॉल करने में समस्या थी, यह बहुत धीमा हो गया। मैंने पाया अंत में यह ऊंचाई का संयोजन था: 100% और अतिप्रवाह-एक्स: छिपा हुआ था, इसलिए मैंने ऊंचाई को हटा दिया: 100% और यह बहुत बेहतर काम करता है।

— पॉल मेसन

धन्यवाद यह एक आकर्षण की तरह काम किया। मैं हमेशा सोचता था कि लगभग अनंत स्क्रॉल बार की सवारी कैसे हो। निश्चित नहीं है कि इसे उत्तर के रूप में चिह्नित क्यों नहीं किया गया है।

— isurfbecause

मैंने पाया कि बूटस्ट्रैप की 'पंक्ति' क्लास एक {मार्जिन-राइट: -15px} दे रही थी, जो मेरे पेज पर आ रही थी।

— जोसेफ

@ जोसेफ के बिंदु पर, यह समस्या अक्सर बूटस्ट्रैप के कंटेनर, रो, और कॉलम ऑब्जेक्ट के गलत उपयोग से उत्पन्न होती है, जो एक दूसरे को पूरी तरह से ऑफसेट करने के लिए पैडिंग और नकारात्मक मार्जिन का उपयोग करते हैं, लेकिन केवल एक साथ ठीक से उपयोग नहीं किया जाता है। नहीं तो टूट जाता है! मेरे अनुभव में, यह दाहिने हाथ की ओर उस सफेद स्थान के सबसे सामान्य कारणों में से एक है। एक BRILLIANT के लिए, कंटेनर, रो, बूटस्ट्रैप के लिए कॉलम, इस और अन्य समस्याओं की चर्चा सहित दृश्य विवरण, इसे पढ़ें (नहीं, मैंने इसे नहीं लिखा): helloerik.com/-

— james

Answer 2

भूत सीएसएस तत्वों के लिए अपने सीएसएस को डीबग करें।

अपने CSS को डीबग करने के लिए इस बुकमार्क का उपयोग करें: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

या सीधे अपने आप को सीएसएस जोड़ें:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

मेरे मामले में एक फेसबुक लाइक बटन की वजह से समस्या हुई।

Comments

यह वास्तव में काम आया

— जोसन इराचेता

शानदार समाधान! यह आपको समस्या की जड़ को खोजने और इसे सही ढंग से ठीक करने में मदद करेगा, और इसके लिए सभी आवश्यक सीएसएस की कुछ लाइनें हैं।

— opdb

यह स्वीकृत उत्तर IMO होना चाहिए। मेरी शर्त यह है कि अधिकांश लोगों ने किसी चीज की चौड़ाई के रूप में 100vw का उपयोग किया और परिणामस्वरूप इस बग को मिला। बस अतिप्रवाह को छिपाना एक उप इष्टतम समाधान है।

— ल्यूक

यह प्रभावशाली है, उस गॉडडैमिट सफेद स्थान पर 2 घंटे बिताए, इसने इसे हल किया।

— कार्लोस रोसो

वाह, बहुत घंटे बिताए और अपराधी को कोड की कुछ पंक्तियों के साथ मिला। धन्यवाद दोस्त :)

— ख्प्पवालक

Answer 3

यहाँ प्रदान की गई कुछ उपयोगी रणनीतियों की खोज करने के बाद, मैंने पाया कि मुझे केवल iOS विशिष्ट CSS जोड़ने की आवश्यकता थी (मैंने इसे अपनी मुख्य css शीट के निचले भाग में रखा है।) लगता है जैसे अतिप्रवाह-एक्स को छिपाना मेरे लिए जवाब था। मुझे लगता है कि 100% पर चौड़ाई बताते हुए घटना में मदद करता है कि मेरी सामग्री चौड़ी है। यह ध्यान दिया जाना चाहिए कि मैं केवल iOS में इस मुद्दे पर था। यदि यह फ़ायरफ़ॉक्स में भी है, तो बस html और बॉडी ब्लॉक का उपयोग किया जाना चाहिए क्योंकि @मीडिया विशेष रूप से मोबाइल उपकरणों को लक्षित कर रहा है।

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

अगर यह किसी को गलत लगता है तो कृपया मुझे हाइप करें :)

Comments

यह केवल एक चीज थी जिसने मेरी समस्या को हल किया

— जेसनडेविस

धन्यवाद - मेरे लिए सबसे अच्छा फिक्स। बहुत ही

— अस्पष्ट

यह समस्या को हल करता है और मोबाइल सफेद स्थान के लिए समझ में आता है

— रोब ग्लीसन 16

आवेदन करने के बाद, सफारी iphone6s पर स्क्रॉल करना शिथिल हो जाता है। क्या मुझे मोबाइल सफारी के लिए एक अतिरिक्त संपत्ति याद आ रही है ताकि वह सुचारू रूप से काम कर सके?

— एरिक रयबल्किन

मेरे लिए सबसे अच्छा जवाब !!

— यूसुफ बौडेया

Answer 4

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

इंस्पेक्टर खोलें (या जो भी आपकी प्राथमिकता हो) और बॉडी टैग में पहले div से शुरू करके, display: none;उस तत्व में जोड़ें । यदि स्क्रॉल बार गायब हो जाता है, तो आप जानते हैं कि तत्व में वह तत्व है जो समस्या पैदा कर रहा है। फिर, पहले सीएसएस नियम को हटा दें और एक तत्व युक्त स्तर में नीचे जाएं। उस div में सीएसएस जोड़ें, और यदि स्क्रॉल बार चला जाता है, तो आप जानते हैं कि तत्व या तो कारण है, या आपत्तिजनक तत्व है। यदि CSS जोड़ने से कुछ नहीं होता है, तो आप जानते हैं कि यह ऐसा डिव नहीं था जो समस्या का कारण था, और या तो कंटेनर में एक और div यह पैदा कर रहा है, या कंटेनर खुद इसे पैदा कर रहा है।

यह कुछ के लिए समय लेने वाली हो सकती है। मेरे लिए भाग्यशाली, मेरा मुद्दा हेडर में था, लेकिन मैं यह थोड़ा समय लेने की कल्पना कर सकता हूं यदि आपका मुद्दा पाद लेख में या कुछ और था।

Comments

इस विधि ने मुझे बग धन्यवाद का पता लगाने में मदद की

— बिल

हाँ, या आप एक के बाद एक उच्चतम स्तर के

— विभाजनों को छिपाते

यह वास्तव में रूट समस्या को सफलतापूर्वक ठीक करने का एकमात्र तरीका है जब आपके पास अजीब तत्व होते हैं जैसे कि height: 0या height: 1। मेरे मामले में, मैंने पाया कि ड्रुपल 7 कोर में एक गलत 'अदृश्य' वर्ग था: drupal.org/node/2664214

— geerlingguy

Answer 5

overflow-x: hidden; मेरे लिए एकदम सही काम करता है।

Answer 6

समस्या फ़ाइल में है:

style.css - पंक्ति 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

लाइनों को हटा दें:

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

यह मूल रूप से केवल पाद लेख को एक छाया ढाल देता है। फ़ायरफ़ॉक्स में, यह पहली पंक्ति है जो समस्या पैदा कर रही है।

Answer 7

मैं भी एक ही मुद्दा था ( वेबसाइट शरीर की पृष्ठभूमि iPhone सफारी में एक सही सफेद मार्जिन प्रदान करता है ) और पाया कि पृष्ठभूमि की छवि को <html>टैग में जोड़ने से समस्या ठीक हो गई।

इससे पहले

body {background:url('images/back.jpg');}

उपरांत

html, body {background:url('images/back.jpg');}

Answer 8

जाहिरा तौर पर (-o-min-device-pixel-ratio: 3/2) समस्या पैदा कर रहा है। मेरे परीक्षण स्थल पर यह सही पक्ष काट रहा था। मुझे जीथब पर एक वर्कअराउंड मिला जो अब के लिए काम करता है। (-ओ-मिन-डिवाइस-पिक्सेल-अनुपात: ~ "3/2") का उपयोग करना ठीक काम करता है।

Answer 9

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

.homepageconference .container {
padding-left: 12%;
}

जिसका उपयोग कोड के साथ किया जा रहा है जिसमें कहा गया है कि तत्व की चौड़ाई 100% है, जिसके कारण स्क्रीन आकार की कुल चौड़ाई 112% है। इसे ठीक करने के लिए, या तो पैडिंग को हटा दें, उसी प्रभाव के लिए पैडिंग को 12% के मार्जिन से बदलें, या तत्व की चौड़ाई (या अधिकतम-चौड़ाई) को 88% पर बदलें। यह 34. लाइन में main.css में होता है। आशा है कि यह मदद करता है!

Comments

या, के लिए box-sizingसंपत्ति सेट करें border-box।

— बेनपई

Answer 10

मेरे पास एक ही मुद्दा था, इसलिए कुछ चीजों की कोशिश की। जिनमें से एक मेरे लिए काम करने के लिए लग रहा था - चौड़ाई को हटाने और बॉडी टैग में फ्लोट को जोड़ना।

सभी उदाहरणों के लिए काम नहीं कर सकते हैं, लेकिन हाल ही में मेरे पास जो परिदृश्य था, उसमें सामग्री तत्वों पर अतिप्रवाह छिपाना एक नहीं था ...

Comments

फ़ायरफ़ॉक्स पर शीर्ष पर भूत तत्व से छुटकारा पाने के लिए मुझे html, बॉडी को चौड़ाई: 0 सेट करना था।

— गरवानी

Answer 11

मैं अपने iPad पर दाईं ओर सफेद रेखा के साथ-साथ क्षैतिज स्थिति में ही अनुभव कर रहा था। मैं एक तय-स्थिति div का उपयोग कर रहा था जिसकी पृष्ठभूमि 960px चौड़ी और z-इंडेक्स -999 थी। यह विशेष रूप से div केवल मीडिया क्वेरी के कारण iPad पर दिखाई देता है। तब सामग्री को 960px चौड़े डिव रैपर में रखा गया था। इस पृष्ठ पर दिए गए उत्तर मेरे मामले में मदद नहीं कर रहे थे। सफेद पट्टी के मुद्दे को ठीक करने के लिए मैंने सामग्री आवरण की चौड़ाई को 958px पर बदल दिया। देखा। क्षैतिज स्थिति में iPad पर कोई अधिक सफेद सही सफेद पट्टी नहीं।

Answer 12

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

यहाँ मेरा कोड है:

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

का आनंद लें!