Perilaku perubahan ukuran kolom URL berubah di Chrome di 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 tersembunyi. Artinya, unit vh akan diukur sesuai "area pandang terbesar". Ini berarti 100vh akan lebih besar
daripada tinggi yang terlihat saat kolom URL ditampilkan.
Initial Containing Block (ICB) adalah blok penampung root yang digunakan saat
mengubah ukuran elemen sesuai dengan induknya. Misalnya, memberi elemen <html>
gaya width: 100%; height: 100% akan membuatnya berukuran sama dengan
ICB. Dengan perubahan ini, ICB tidak akan mengubah ukuran jika kolom URL disembunyikan.
Namun, tingginya akan tetap sama, seolah-olah kolom URL selalu menampilkan
("area pandang terkecil yang memungkinkan"). Artinya, Elemen yang disesuaikan dengan tinggi ICB tidak akan sepenuhnya mengisi tinggi yang terlihat saat kolom URL tersembunyi.
Ada satu pengecualian untuk perubahan di atas, dan itu untuk elemen yang merupakan
position: fixed. Perilakunya tetap 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 100%, kolom tersebut akan selalu mengisi
tinggi yang terlihat persis, baik kolom URL ditampilkan maupun tidak. Demikian pula untuk
panjang vh, ukuran juga akan diubah ukurannya agar sesuai dengan tinggi yang terlihat dengan mempertimbangkan posisi
kolom URL.
Ada beberapa alasan untuk perubahan ini:
Unit
vhyang dapat digunakan di seluler. Sebelumnya, penggunaan unitvhberarti halaman akan berubah posisi/geometrinya setiap kali pengguna mengubah arah scroll.Pengalaman pengguna yang lebih baik. Jika halaman berubah posisi saat pengguna sedang membaca, lokasi relatifnya dalam dokumen mungkin akan hilang. Hal ini menjengkelkan, tetapi juga menimbulkan penggunaan prosesor dan konsumsi baterai tambahan untuk menata ulang dan menggambar ulang halaman.
Interoperabilitas yang ditingkatkan dengan Safari di iOS. Model baru harus sesuai dengan perilaku Safari, sehingga memudahkan developer web. Pilihan yang tidak intuitif membuat unit
vhmenjadi area pandang terbesar, tetapi ICB menjadi sekecil mungkin adalah menyesuaikan perilaku Safari.
Untuk skenario layar penuh, saat kolom URL dikunci ke status tersembunyi, ICB akan menggunakan tinggi layar penuh. Hal ini sesuai dengan definisi di atas karena "area pandang terkecil" akan menjadi area pandang penuh karena kolom URL tidak ditampilkan saat men-scroll.
Demo
- Berikut ini demonstrasinya.
Empat batang di sebelah kanan halaman adalah semua kemungkinan kombinasi
99%,99vh,position:fixed, danposition:absoluteyang disediakan pada halaman yang dapat di-scroll. Menyembunyikan kolom URL akan menunjukkan pengaruhnya terhadap masing-masing kolom. Peristiwa Pengubahan ukuran akan dicetak di bagian bawah halaman.
Dukungan
- Chrome 56 di Android.