พื้นที่สีขาวปรากฏขึ้นทางด้านขวาของหน้าเมื่อภาพพื้นหลังควรขยายเต็มความยาวของหน้า [ปิด]

110

ปิด. คำถามนี้ต้องการรายละเอียดการแก้จุดบกพร่อง ขณะนี้ยังไม่ยอมรับคำตอบ

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน5 ปีที่ผ่านมา

ภาพพื้นหลังหน้าเว็บของเรากำลังมีปัญหาใน FireFox และ Safari ใน iOS บน iPads / iPhones ที่มีพื้นที่สีขาวปรากฏขึ้นทางด้านขวาของหน้า

ภาพพื้นหลังสามารถขยายได้ดีในเบราว์เซอร์อื่น ๆ แต่เราประสบปัญหาที่จะไม่ขยายความยาวเต็มของเบราว์เซอร์บนเบราว์เซอร์เหล่านั้น

ลองดูเว็บไซต์ของเราใน FireFoxเพื่อดูว่าฉันหมายถึงอะไร

html css

— เดฟ
แหล่งที่มา

หากคุณใช้ Framwork เช่น bootstrap หรือ Foundation ให้ตรวจสอบว่าตอนนี้คอลัมน์เป็นลูกตัวแรกของร่างกาย แต่ซ้อนอยู่ใน div อื่นที่มีช่องว่างภายใน (small-12 fe)

— Lightningsoul

คุณแก้มันออกแล้ว @Dave?

— gumuruh

บ้าไม่ใช่เหรอ 6 ปีต่อมาและ iOS Safari ยังคงแสดงปัญหานี้ ฉันลองใช้โซลูชัน CSS มากมาย แต่ในที่สุดก็ต้องหันมาใช้ jQuery stackoverflow.com/a/45009357/391605

— Mike Gledhill

266

ฉันเพิ่ม:

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

ลงใน CSS ของคุณที่ด้านบนสุดเหนือคลาสอื่น ๆ และดูเหมือนว่าจะแก้ไขปัญหาของคุณได้

ไฟล์. css ที่อัปเดตของคุณอยู่ที่นี่

— Rion Williams
แหล่งที่มา

4

ยอดเยี่ยมที่เพิ่งแก้ไขข้อบกพร่องสำหรับฉันที่รบกวนฉันมาระยะหนึ่งแล้ว!

— gleddy

22

ฉันมีปัญหากับการเลื่อนบน Safari iphone ด้วยรหัสนี้มันช้ามาก ฉันพบว่าสุดท้ายแล้วมันคือการรวมกันของความสูง: 100% และ overflow-x: hidden ดังนั้นฉันจึงลบความสูง: 100% และทำงานได้ดีขึ้นมาก

— Paul Mason

ขอบคุณสิ่งนี้ทำงานได้อย่างมีเสน่ห์ ฉันสงสัยเสมอว่าจะนั่งแถบเลื่อนที่แทบไม่มีที่สิ้นสุดได้อย่างไร ไม่แน่ใจว่าเหตุใดจึงไม่ถูกทำเครื่องหมายว่าเป็นคำตอบ

— isurfbecause

5

ฉันพบว่าคลาส 'row' ของ bootstrap ให้ค่า {margin-right: -15px} ซึ่งทำให้เกิดปัญหานี้ในเพจของฉัน

— JosephK

2

ในประเด็นของ @JosephK ปัญหานี้มักเกิดจากการใช้คอนเทนเนอร์แถวและคอลัมน์ของ Bootstrap อย่างไม่ถูกต้องซึ่งใช้ช่องว่างภายในและระยะขอบเชิงลบเพื่อหักล้างซึ่งกันและกันอย่างสมบูรณ์แบบ แต่เมื่อใช้อย่างถูกต้องพร้อมเพรียงกันเท่านั้น ไม่งั้นพัง! จากประสบการณ์ของฉันนี่เป็นหนึ่งในสาเหตุที่พบบ่อยที่สุดของพื้นที่สีขาวทางด้านขวามือ สำหรับ BRILLIANT คำอธิบายภาพของคอนเทนเนอร์แถวคอลัมน์สำหรับ Bootstrap รวมถึงการอภิปรายเกี่ยวกับปัญหานี้และปัญหาอื่น ๆ โปรดอ่านสิ่งนี้ (ไม่ฉันไม่ได้เขียน): helloerik.com/…

— เจมส์

133

ดีบัก CSS ของคุณสำหรับ Ghost CSS Elements

ใช้บุ๊กมาร์กนี้เพื่อดีบัก CSS ของคุณ: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

หรือเพิ่ม CSS โดยตรงด้วยตัวคุณเอง:

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

ในกรณีของฉันปุ่มไลค์ Facebook ทำให้เกิดปัญหา

— Optimiertes
แหล่งที่มา

1

สิ่งนี้มีประโยชน์จริงๆ

— Josan Iracheta

6

ทางออกที่ยอดเยี่ยม! สิ่งนี้จะช่วยให้คุณพบต้นตอของปัญหาและแก้ไขได้อย่างถูกต้องและสิ่งที่ต้องมีก็คือ css ไม่กี่บรรทัด

— opdb

3

นี่ควรเป็นคำตอบที่ได้รับการยอมรับ IMO เดิมพันของฉันคือคนส่วนใหญ่ใช้ 100vw เป็นความกว้างของบางสิ่งบางอย่างและได้รับข้อผิดพลาดนี้ เพียงแค่ซ่อนส่วนที่ล้นออกมาเป็นวิธีแก้ปัญหาที่เหมาะสมที่สุด

— Luke

นี่เป็นสิ่งที่น่าประทับใจใช้เวลา 2 ชั่วโมงบนพื้นที่สีขาวที่น่ารังเกียจสิ่งนี้แก้ไขได้

— Carlos Roso

ว้าวใช้เวลาหลายชั่วโมงและพบผู้ร้ายด้วยรหัสเพียงไม่กี่บรรทัด ขอบคุณเพื่อน :)

— Khpalwalk

55

หลังจากสำรวจกลยุทธ์ที่เป็นประโยชน์บางอย่างที่ให้ไว้ที่นี่ฉันพบว่าฉันต้องเพิ่ม CSS เฉพาะของ iOS เท่านั้น (ฉันวางไว้ที่ด้านล่างของแผ่น css หลักของฉัน) ดูเหมือนว่าการซ่อน overflow-x เป็นคำตอบสำหรับฉัน ฉันคิดว่าการระบุความกว้างที่ 100% ช่วยในกรณีที่เนื้อหาของฉันกว้างขึ้น ควรสังเกตว่าฉันมีปัญหานี้ใน iOS เท่านั้น หากเป็นใน Firefox ด้วยก็ควรใช้เพียง html และ body block เนื่องจาก @media กำหนดเป้าหมายอุปกรณ์เคลื่อนที่โดยเฉพาะ

@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;
  }

}

โปรดสะโพกฉันถ้าสิ่งนี้ดูเหมือนจะไม่ถูกต้องสำหรับใคร :)

— จอนไรเซอร์
แหล่งที่มา

5

นี่เป็นสิ่งเดียวที่แก้ไขปัญหาของฉัน

— JasonDavis

1

ขอบคุณ - วิธีแก้ไขที่ดีที่สุดสำหรับฉัน ค่อนข้าง

— สงบเสงี่ยม

วิธีนี้ช่วยแก้ปัญหาและเหมาะสมกับพื้นที่สีขาวบนอุปกรณ์เคลื่อนที่

— Rob Gleeson

หลังจากสมัครแล้วการเลื่อนบน Safari iphone6s จะล้าหลัง ฉันไม่มีคุณสมบัติเพิ่มเติมสำหรับ Safari บนมือถือที่จะทำให้การทำงานราบรื่นหรือไม่?

— Erik Rybalkin

ตอบโจทย์ที่สุด !!

— Youssef Boudaya

28

นี่เป็นคำถามที่ค่อนข้างเก่า แต่ฉันคิดว่าจะเพิ่ม 2 เซ็นต์ ฉันได้ลองวิธีแก้ปัญหาข้างต้นรวมถึง ghost css ซึ่งฉันจะประหยัดเพื่อใช้ในอนาคตอย่างแน่นอน แต่สิ่งเหล่านี้ไม่ได้ผลในสถานการณ์ของฉัน นี่คือวิธีที่ฉันแก้ไขปัญหาของฉัน หวังว่านี่จะช่วยคนอื่นได้

เปิดตัวตรวจสอบ (หรืออะไรก็ได้ที่คุณต้องการ) และเริ่มต้นด้วย div แรกในแท็ก body ให้เพิ่ม display: none;ในองค์ประกอบนั้น หากแถบเลื่อนหายไปแสดงว่าองค์ประกอบนั้นมีองค์ประกอบที่ทำให้เกิดปัญหา จากนั้นลบกฎ css แรกและลงไปหนึ่งระดับในองค์ประกอบที่มี เพิ่ม css ใน div นั้นและหากแถบเลื่อนหายไปคุณจะรู้ว่าองค์ประกอบนั้นก่อให้เกิดหรือมีองค์ประกอบที่ไม่เหมาะสม หากการเพิ่ม CSS ไม่ได้ทำอะไรเลยคุณจะรู้ว่าไม่ใช่ div ที่ทำให้เกิดปัญหาและ div อื่นในคอนเทนเนอร์เป็นสาเหตุหรือตัวคอนเทนเนอร์เองก็เป็นสาเหตุ

อาจใช้เวลานานเกินไปสำหรับบางคน โชคดีสำหรับฉันปัญหาของฉันอยู่ในส่วนหัว แต่ฉันสามารถจินตนาการได้ว่าจะใช้เวลาสักครู่หากปัญหาของคุณถูกพูดในส่วนท้ายหรือบางอย่าง

— ยัติภังค์
แหล่งที่มา

วิธีนี้ช่วยให้ฉันพบจุดบกพร่องขอบคุณ

— Bill

ใช่หรือคุณสามารถลงโดมที่ซ่อน div ระดับสูงสุดทีละรายการแล้วเข้าไปข้างใน .. และอื่น ๆ

— hatenine

นี่คือจริงๆวิธีเดียวที่จะประสบความสำเร็จในการแก้ไขปัญหารากเมื่อคุณมีองค์ประกอบแปลกเหมือนคนที่มีหรือheight: 0 height: 1ในกรณีของฉันฉันพบว่าสาเหตุคือคลาส 'ล่องหน' ที่ผิดพลาดใน Drupal 7 core: drupal.org/node/2664214

— geerlingguy

10

overflow-x: hidden; ทำงานได้สมบูรณ์แบบสำหรับฉัน

— หอม
แหล่งที่มา

5

ปัญหาอยู่ในไฟล์:

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;

โดยพื้นฐานแล้วจะให้การไล่ระดับสีของเงาเฉพาะส่วนท้ายเท่านั้น ใน Firefox เป็นบรรทัดแรกที่ทำให้เกิดปัญหา

— DMin
แหล่งที่มา

2

ฉันก็มีปัญหาเดียวกันเช่นกัน ( พื้นหลังเนื้อหาของเว็บไซต์แสดงขอบสีขาวด้านขวาใน iPhone Safari ) และพบว่าการเพิ่มภาพพื้นหลังลงใน<html>แท็กช่วยแก้ปัญหาได้

ก่อน

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

หลังจาก

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

— Xavi Esteve
แหล่งที่มา

2

เห็นได้ชัดว่า (-o-min-device-pixel-ratio: 3/2) ทำให้เกิดปัญหา ในไซต์ทดสอบของฉันมันทำให้ด้านขวาถูกตัดออก ฉันพบวิธีแก้ปัญหาในgithubที่ใช้ได้ในตอนนี้ การใช้ (-o-min-device-pixel-ratio: ~ "3/2") ดูเหมือนจะทำงานได้ดี

— ลูอาร์
แหล่งที่มา

2

ฉันเห็นว่าคำถามได้รับคำตอบตามมาตรฐานทั่วไปแล้ว แต่เมื่อฉันดูไซต์ของคุณฉันสังเกตเห็นว่ายังมีแถบเลื่อนแนวนอนอยู่ ฉันยังสังเกตเห็นเหตุผลนี้: คุณได้ใช้รหัส:

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

ซึ่งใช้ร่วมกับรหัสที่ระบุว่าองค์ประกอบมีความกว้าง 100% ทำให้องค์ประกอบที่มีความกว้างรวม 112% ของขนาดหน้าจอ ในการแก้ไขปัญหานี้ให้ลบช่องว่างภายในแทนที่ช่องว่างภายในด้วยระยะขอบ 12% เพื่อให้ได้เอฟเฟกต์เดียวกันหรือเปลี่ยนความกว้าง (หรือความกว้างสูงสุด) ขององค์ประกอบเป็น 88% สิ่งนี้เกิดขึ้นใน main.css ที่บรรทัด 343 หวังว่านี่จะช่วยได้!

— HippoRustler
แหล่งที่มา

หรือการตั้งค่าคุณสมบัติการbox-sizing border-box

— Benpai

2

ฉันมีปัญหาเดียวกันจึงลองทำสองสามอย่าง หนึ่งในนั้นดูเหมือนจะใช้ได้ผลสำหรับฉัน - การลบความกว้างและเพิ่มลอยให้กับแท็กร่างกาย

อาจใช้ไม่ได้กับทุกอินสแตนซ์ แต่ในสถานการณ์ที่ฉันเพิ่งมีเมื่อเร็ว ๆ นี้การซ่อนส่วนเกินในองค์ประกอบเนื้อหานั้นไม่ต้องทำ ...

— การออกแบบที่ส่องสว่าง
แหล่งที่มา

ฉันต้องตั้งค่า html, body เป็น width: 0 เพื่อกำจัด Ghost Element ที่อยู่ด้านบนของ Firefox

— Garavani

1

ฉันพบเส้นสีขาวทางด้านขวาบน iPad และอยู่ในตำแหน่งแนวนอนเท่านั้น ฉันใช้ div ตำแหน่งคงที่โดยตั้งพื้นหลังเป็นความกว้าง 960px และดัชนี z เท่ากับ -999 div เฉพาะนี้จะปรากฏบน iPad เท่านั้นเนื่องจากมีการสืบค้นจากสื่อ จากนั้นเนื้อหาจะถูกวางลงในกระดาษห่อ Div แบบกว้าง 960px คำตอบที่ให้ไว้ในหน้านี้ไม่ได้ช่วยอะไรในกรณีของฉัน เพื่อแก้ไขปัญหาแถบสีขาวฉันเปลี่ยนความกว้างของ Wrapper เนื้อหาเป็น 958px Voilá ไม่มีแถบสีขาวด้านขวาสีขาวอีกต่อไปบน iPad ในตำแหน่งแนวนอน

— modern4life
แหล่งที่มา

1

คำถามนี้เกิดขึ้นมาระยะหนึ่งแล้ว แต่ไม่มีวิธีแก้ไขใดที่ฉันคิดว่าใช้ได้ผล (มีปัญหาเดียวกันกับ ipad) แต่ฉันจัดการวิธีแก้ปัญหาของตัวเองซึ่งน่าจะใช้ได้กับคนส่วนใหญ่ที่ฉันคิด

นี่คือรหัสของฉัน:

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

สนุก!

— ไมเคิล
แหล่งที่มา