Ruang putih muncul di sisi kanan halaman ketika gambar latar harus diperpanjang sepanjang halaman [tertutup]

Gambar latar belakang halaman web kami mengalami masalah di FireFox serta Safari di iOS di iPads / iPhone dengan ruang putih muncul di sisi kanan halaman.

Gambar latar belakang diperluas dengan baik di peramban lain tetapi kami mengalami kesulitan untuk tidak memperpanjang panjang peramban di peramban tersebut.

Kunjungi situs kami di FireFox untuk mengetahui apa yang saya maksud.

Saya tambahkan:

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

ke dalam CSS Anda di bagian paling atas di atas kelas lain dan tampaknya telah memperbaiki masalah Anda.

File .css Anda yang diperbarui tersedia di sini

Debug CSS Anda untuk Ghost CSS Elements.

Gunakan bookmark ini untuk men-debug CSS Anda: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Atau tambahkan CSS Anda sendiri secara langsung:

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

Dalam kasus saya, Tombol Suka Facebook menyebabkan masalah.

Setelah menjelajahi beberapa strategi bermanfaat yang disediakan di sini, saya menemukan bahwa saya hanya perlu menambahkan CSS khusus iOS (saya meletakkannya di bagian bawah lembar css utama saya.) Sepertinya menyembunyikan overflow-x adalah jawaban bagi saya. Saya berasumsi bahwa menyatakan lebar pada 100% membantu jika konten saya melebar. Perlu dicatat bahwa saya hanya mengalami masalah ini di iOS. Jika juga ada di Firefox, hanya html dan body block yang mungkin harus digunakan karena @media secara khusus menargetkan perangkat seluler.

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

}

Tolong panggil saya jika ini tampaknya tidak benar bagi siapa pun :)

Ini adalah pertanyaan yang cukup lama, tapi saya pikir saya akan menambahkan 2 sen saya. Saya sudah mencoba solusi di atas, termasuk ghost css, yang pasti akan saya simpan untuk penggunaan di masa mendatang. Tetapi tidak ada yang berhasil dalam situasi saya. Inilah cara saya memperbaiki masalah saya. Semoga ini akan membantu orang lain.

Buka inspektur (atau apa pun preferensi Anda) dan mulai dengan div pertama di tag body, tambahkan display: none;hanya ke elemen itu. Jika bilah gulir menghilang, Anda tahu bahwa elemen tersebut berisi elemen yang menyebabkan masalah. Kemudian, hapus aturan css pertama dan turun satu tingkat ke elemen penampung. Tambahkan css ke div itu, dan jika bilah gulir menghilang, Anda tahu bahwa elemen tersebut menyebabkan, atau berisi elemen yang melanggar. Jika menambahkan CSS tidak menghasilkan apa-apa, Anda tahu bahwa bukan div yang menyebabkan masalah, dan baik div lain dalam penampung yang menyebabkannya, atau penampung itu sendiri yang menyebabkannya.

Ini mungkin terlalu memakan waktu bagi sebagian orang. Beruntung bagi saya, masalah saya ada di header, tetapi saya bisa membayangkan ini memakan sedikit waktu jika masalah Anda disebutkan, di footer atau semacamnya.

overflow-x: hidden; bekerja sempurna untuk saya.

Masalahnya ada di file:

style.css - baris 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;
}

hapus garis:

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

Ini pada dasarnya memberikan gradien bayangan hanya ke footer. Di Firefox, ini adalah baris pertama yang menyebabkan masalah.

Saya juga mengalami masalah yang sama ( Latar belakang badan situs web memberikan margin putih kanan di iPhone Safari ) dan menemukan bahwa menambahkan gambar latar belakang ke <html>tag memperbaiki masalah.

Sebelum

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

Setelah

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

Rupanya (-o-min-device-pixel-ratio: 3/2) menyebabkan masalah. Di situs pengujian saya, hal itu menyebabkan sisi kanan terpotong. Saya menemukan solusi tentang github yang berfungsi untuk saat ini. Penggunaan (-o-min-device-pixel-ratio: ~ "3/2") sepertinya berfungsi dengan baik.

Saya melihat pertanyaan itu telah dijawab dengan standar umum, tetapi ketika saya melihat situs Anda, saya perhatikan masih ada bilah gulir horizontal. Saya juga memperhatikan alasannya: Anda telah menggunakan kode:

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

yang digunakan bersama kode yang menyatakan bahwa elemen memiliki lebar 100%, menyebabkan elemen dengan lebar total 112% dari ukuran layar. Untuk memperbaikinya, hapus padding, ganti padding dengan margin 12% untuk efek yang sama, atau ubah lebar (atau max-width) elemen menjadi 88%. Ini terjadi di main.css pada baris 343. Semoga ini bisa membantu!

Saya memiliki masalah yang sama, jadi cobalah beberapa hal. Salah satunya sepertinya berhasil untuk saya - menghilangkan lebar dan menambahkan pelampung ke tag bodi.

Mungkin tidak berfungsi untuk semua contoh, tetapi dalam skenario yang saya miliki baru-baru ini, menyembunyikan overflow pada elemen konten tidak boleh dilakukan ...

Saya mengalami garis putih ke kanan di iPad saya juga dalam posisi horizontal saja. Saya menggunakan div posisi tetap dengan latar belakang disetel ke lebar 960px dan indeks-z -999. Div khusus ini hanya muncul di iPad karena kueri media. Konten kemudian ditempatkan ke dalam pembungkus div lebar 960px. Jawaban yang diberikan di halaman ini tidak membantu dalam kasus saya. Untuk memperbaiki masalah garis putih saya mengubah lebar pembungkus konten menjadi 958px. Voilá. Tak ada lagi strip putih kanan putih di iPad dalam posisi horizontal.

Pertanyaan ini telah lama berkeliaran, tetapi tidak ada perbaikan yang saya temukan berhasil untuk saya (memiliki masalah yang sama dengan ipad), tetapi saya mengelola solusi saya sendiri yang seharusnya berfungsi untuk kebanyakan orang yang saya bayangkan.

Ini kode saya:

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

Nikmati!