Perilaku pengubahan ukuran kolom URL akan berubah di Chrome pada Android mulai versi 56. Berikut ini beberapa hal yang perlu diketahui:
Panjang yang ditentukan dalam unit area pandang (yaitu vh
) tidak akan diubah ukurannya sebagai respons
terhadap kolom URL yang ditampilkan atau disembunyikan. Sebagai gantinya, unit vh
akan disesuaikan ukurannya
dengan tinggi area pandang seolah-olah kolom URL selalu disembunyikan. Artinya, unit vh
akan
diukur ke "area pandang terbesar yang memungkinkan". Ini berarti 100vh
akan lebih besar
dari tinggi yang terlihat saat kolom URL ditampilkan.
Blok Penahan Awal (ICB) adalah blok berisi root yang digunakan saat
mengubah ukuran elemen yang relatif dengan induknya. Misalnya, memberi elemen <html>
gaya width: 100%; height: 100%
akan membuatnya sama ukurannya dengan
ICB. Dengan perubahan ini, ICB tidak akan mengubah ukuran saat kolom URL disembunyikan.
Namun, tingginya akan tetap sama, seolah-olah kolom URL selalu ditampilkan
("area pandang terkecil yang memungkinkan"). Artinya, Elemen yang berukuran sama dengan tinggi ICB tidak akan sepenuhnya mengisi tinggi yang terlihat saat kolom URL disembunyikan.
Ada satu pengecualian untuk perubahan di atas dan itu untuk elemen yang merupakan
position: fixed
. Perilaku mereka tidak berubah. Artinya, elemen position:
fixed
yang blok penampungnya adalah ICB akan diubah ukurannya sebagai respons terhadap kolom URL yang ditampilkan atau disembunyikan. Misalnya, jika tingginya adalah 100%
, tingginya akan selalu mengisi
dengan persis tinggi yang terlihat, terlepas dari apakah kolom URL ditampilkan atau tidak. Demikian pula untuk
panjang vh
, ukuran juga akan diubah agar sesuai dengan tinggi yang terlihat dengan mempertimbangkan posisi kolom
URL.
Ada beberapa alasan untuk perubahan ini:
Unit
vh
dapat digunakan di seluler. Sebelumnya, penggunaan unitvh
berarti halaman akan mengalami perubahan posisi/geometri setiap kali pengguna mengubah arah scroll.Peningkatan pengalaman pengguna. Jika halaman berubah posisi/geometrinya saat pengguna sedang membaca, mereka mungkin kehilangan lokasi relatifnya di dokumen. Hal ini menjengkelkan, tetapi juga menyebabkan penggunaan prosesor dan pengurasan baterai tambahan untuk menata ulang dan menggambar ulang halaman.
Interoperabilitas yang ditingkatkan dengan Safari di iOS. Model baru ini harus sesuai dengan perilaku Safari, sehingga mempermudah pekerjaan developer web. Pilihan yang tidak intuitif untuk menjadikan unit
vh
sebagai area pandang terbesar, tetapi ICB menjadi yang terkecil adalah untuk mencocokkan perilaku Safari.
Untuk skenario layar penuh, dengan kolom URL terkunci ke status tersembunyi, ICB akan menggunakan tinggi layar penuh. Hal ini konsisten dengan definisi di atas karena "area pandang terkecil" akan menjadi area pandang penuh karena kolom URL tidak muncul saat di-scroll.
Demo
- Berikut demonstrasinya.
Empat batang di sebelah kanan halaman adalah semua kemungkinan kombinasi
99%
,99vh
,position:fixed
, danposition:absolute
yang disediakan pada halaman yang dapat di-scroll. Menyembunyikan kolom URL akan menunjukkan pengaruhnya terhadap setiap kolom. Peristiwa pengubahan ukuran akan ditampilkan di bawah halaman.
Dukungan
- Chrome 56 di Android.