iPhone Scrolling Background Color Issue

When building web applications, it's essential to ensure a consistent user experience across all devices. A common issue developers encounter when designing for iOS devices is the default white background that appears when users scroll beyond the top or bottom of a webpage.

This behavior stems from iOS's 'bounce' effect. The bounce effect is an iOS-specific feature that gives users a sense of depth and context, allowing them to know they've scrolled to the end of a page. When a user scrolls beyond the edge of a page, the webpage moves with the swipe, then bounces back into place when the swipe ends, revealing a white background during this motion.

This background is separate from the page itself, so it remains white even if you set a different background color for the HTML body or page element.

-webkit-overflow-scrolling Solution

A common workaround to this problem uses the non-standard -webkit-overflow-scrolling CSS property. This property sets the scrolling behavior for elements, allowing momentum-based scrolling on touch devices. Using this property, developers can set a consistent background color for the scrolling area.

Here's how you might implement this:

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

Meskipun solusi ini dapat memperbaiki masalah secara langsung, para pengembang harus menyadari bahwa -webkit-overflow-scrolling bukanlah CSS standar dan khusus untuk browser berbasis WebKit (seperti Safari). Apple juga secara resmi menghentikan penggunaan fitur ini, yang berarti mungkin tidak berfungsi di versi iOS yang akan datang.

Solusi Pseudo-elemen

Untuk menghindari masalah kompatibilitas pada solusi sebelumnya, para pengembang dapat menggunakan teknik yang lebih sesuai dengan standar. Solusi ini melibatkan pembuatan pseudo-elemen tetap di belakang body yang menutupi seluruh viewport. Dengan mengatur warna latar belakang pada pseudo-elemen ini, para pengembang dapat memastikan warna latar belakang yang konsisten saat pengguna menggulir.

Berikut adalah contoh solusi ini:

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

Dengan menambahkan aturan CSS ini, pseudo-elemen memberikan latar belakang biru yang tetap selama seluruh viewport. Sebagai hasilnya, bahkan saat pengguna menggulir melewati bagian atas atau bawah halaman web (yang memicu efek bounce), latar belakang biru akan terlihat daripada latar belakang putih yang default.