Masalah Warna Latar Belakang Pengguliran pada iPhone

Ketika membangun aplikasi web, penting untuk memastikan pengalaman pengguna yang konsisten di semua perangkat. Masalah umum yang dihadapi oleh para pengembang saat merancang untuk perangkat iOS adalah latar belakang putih default yang muncul saat pengguna menggulir melewati bagian atas atau bawah halaman web.

Perilaku ini berasal dari efek 'bounce' pada iOS. Efek bounce adalah fitur khusus iOS yang memberikan pengguna rasa kedalaman dan konteks, memungkinkan mereka mengetahui bahwa mereka telah menggulir ke akhir halaman. Ketika pengguna menggulir melewati batas halaman, halaman web bergerak bersama swipe, kemudian memantul kembali ke tempat semula saat swipe berakhir, dan selama gerakan ini, muncul latar belakang putih.

Latar belakang ini terpisah dari halaman itu sendiri, sehingga tetap berwarna putih meskipun Anda mengatur warna latar belakang yang berbeda untuk body HTML atau elemen halaman.

Solusi -webkit-overflow-scrolling

Salah satu solusi umum untuk masalah ini menggunakan properti CSS non-standar -webkit-overflow-scrolling. Properti ini mengatur perilaku pengguliran elemen, memungkinkan pengguliran berbasis momentum pada perangkat sentuh. Dengan menggunakan properti ini, para pengembang dapat mengatur warna latar belakang yang konsisten untuk area pengguliran.

Berikut adalah contoh implementasinya:

body {
  background: blue;
  -webkit-overflow-scrolling: touch;
}

While this solution can fix the immediate problem, developers should be aware that -webkit-overflow-scrolling is not standard CSS and is specifically for WebKit-based browsers (like Safari). Apple has also officially deprecated this feature, meaning it might not work in future iOS versions.

Pseudo-element Solution

To circumvent the potential compatibility issues of the previous solution, developers can utilize a more standard-compliant technique. This solution involves creating a fixed pseudo-element behind the body that covers the entire viewport. By setting the background color of this pseudo-element, developers can ensure a consistent background color during scroll actions.

Here's an example of this solution:

body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: blue;
}

By adding this CSS rule, the pseudo-element provides a fixed blue background that spans the entire viewport. As a result, even when users scroll beyond the top or bottom of a webpage (triggering the bounce effect), the blue background is revealed instead of the default white.