Latar belakang layar penuh CSS menunjukkan bilah putih di bagian bawah saat menggulir di ponsel

Question

Saya memiliki situs web dengan gambar latar layar penuh.

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

Kode ini berfungsi dengan baik di sebagian besar perangkat, tetapi pada beberapa perangkat Android lama, ini menyebabkan masalah saat menggulir ke bawah. Menggulir sebagian ke bawah, tetapi tidak melepaskan jari Anda menunjukkan bilah putih yang ukurannya sama dengan bilah URL yang menghilang pada saat yang bersamaan. Setelah Anda melepaskan jari Anda, latar belakang diperbaiki dengan sendirinya.

Seperti inilah tampilan gambar di tengah gulir.

Adakah cara untuk memastikan latar belakang selalu memenuhi halaman?

---

Sunting: Saya juga mencoba menambahkan div dengan properti ini:

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

Ini menunjukkan latar belakang tetapi masalah yang sama terjadi.

Answer 1

Pada IOS dan perangkat Android yang lebih baru, vh telah diperbaiki sehingga 100vh selalu merupakan ketinggian antara bagian bawah bilah atas minimal dan bagian bawah layar.

Pada perangkat yang lebih lama tidak demikian, jadi vh berubah ketika pengguna menghilangkan beberapa bilah atas browser dengan menggulir.

Perbaikan ini diperkenalkan untuk menghentikan fenomena yang Anda lihat, dan potensi 'lompatan' dalam ukuran elemen saat menggulir. Ini telah menimbulkan masalah lain yaitu tidak semua latar belakang Anda akan ditampilkan saat pengguna pertama kali memasuki halaman.

Dalam kasus Anda, ini tidak terlihat karena warna solid agak jauh di bagian bawah gambar Anda. Tidak masalah jika ada teks di dekat bagian bawah.

Anda mungkin bisa mengatasi masalah Anda dengan memiliki elemen yang benar-benar ditempatkan, atau elemen pseudo, yang memiliki latar belakang yang sama tetapi pada 100vh plus sedikit. Ini mungkin berhasil, yaitu. itu memberikan gabungan yang terlihat, mengingat sifat gambar Anda.

Bukan solusi umum, saya sadari.

Answer 2

Anda dapat mencoba menggunakan elemen pseudo, ini mungkin sedikit berhasil, tetapi berpotensi memperbaiki masalah, seperti itu

html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}

body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}

Answer 3

Coba ini. Ini akan membuat background Anda selalu memenuhi halaman

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;
}

Answer 4

Bagaimana jika Anda cukup mengatur latar belakang aplikasi utama menjadi hitam, dan memperpanjang foto latar belakang dengan bercampur dalam garis hitam kecil? Ini terdengar seperti bug / fitur Android.

Answer 5

Apakah Anda mencoba ini:

html {
   min-height: 100vh;
}

Ini disarankan dalam pertanyaan tautan di bawah ini, yang tampaknya mirip dengan masalah Anda:

https://stackoverflow.com/a/47372972/6119844

Answer 6

Saya tidak tahu bagaimana melakukan ini, jadi saya mencarinya. Safarimemiliki kecenderungan untuk melakukan ini di semua situs web, tetapi Anda mungkin dapat memperbaikinya untuk kasus Anda. Saya telah menemukan beberapa pertanyaan serupaStack Overflow tentang cara memperbaikinya. Saya akan menyajikan beberapa solusi di bawah ini:

Tambahkan kelas gulir ke latar belakang Anda

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

Mencegah overflow scrolling

html,
body {
 -webkit-overflow-scrolling: auto;
}

Menggunakan Perpustakaan iNoBounce

Perpustakaan ini dapat ditemukan di sini . Ini harus menjadi pilihan terakhir Anda jika metode lain tidak berhasil. Pemilik belum merilis pembaruan baru sejak 2018, tetapi untuk saat ini telah berhasil melalui pengujian saya. Selamat Coding :)

Answer 7

coba ini: 420 adalah ukuran layar ponsel yang umum. ??? didasarkan pada tinggi elemen Anda

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}

Answer 8

Jika scrollbar tidak digunakan sama sekali, Anda dapat menambahkan oveflow yang disembunyikan ke body dan tidak ada overflow yang dapat dilihat. Coba atur margin dan padding ke 0

Answer 9

Itu karena height: 100vh;Anda perlu menambah tinggi badan. Mungkin Anda harus mencoba height:100%atau mencobamin-height: 100vh;

Answer 10

1. Gunakan -webkit-fill-available

   https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

2. Saya memiliki masalah serupa yang harus saya hitung tinggi badan tanpa safari toolbar. datang dengan solusi ini. Tidak tahu apakah ini bekerja untuk Anda juga atau tidak:

   tubuh {tinggi: 100vh; tinggi: calc (var (- vh, 1vh) * 100); }