Pada bulan November, dengan rilis Chrome 108, Chrome akan melakukan beberapa perubahan pada cara kerja Viewport Tata Letak saat keyboard virtual (OSK) ditampilkan. Dengan perubahan ini, Chrome di Android tidak akan lagi mengubah ukuran Area Pandang Tata Letak, dan sebagai gantinya hanya mengubah ukuran Area Pandang Visual. Hal ini akan membuat perilaku Chrome di Android setara dengan Chrome di iOS dan Safari di iOS.
Berikut beberapa latar belakang tentang apa yang terjadi, alasan Chrome melakukan perubahan ini, dan tindakan yang dapat Anda lakukan sebagai persiapan.
Area Pandang Tata Letak dan Area Pandang Visual
Saat mengunjungi situs, Anda tidak akan melihat seluruh konten halaman setelah situs dimuat. Sebagai gantinya, browser menawarkan area pandang yang memungkinkan Anda melihat bagian halaman. Area pandang ini juga dikenal sebagai Layout Viewport. Jika konten halaman menjadi terlalu besar, browser menawarkan mekanisme scroll.
Saat memosisikan elemen menggunakan position: fixed, elemen ini akan diletakkan pada Area Pandang Tata Letak tersebut. Karena Viewport Tata Letak tetap berada di tempat Anda men-scroll halaman ke bawah, begitu juga elemen yang menggunakan position: fixed.
position: fixed (kotak biru). Yang ditampilkan adalah (dari kiri ke kanan) Safari di iPhone, Chrome di Android, dan Firefox di Android.
Selain Area Pandang Tata Letak ini, browser juga menawarkan Area Pandang Visual. Area ini mewakili bagian area pandang yang saat ini terlihat. Pada tingkat zoom 1, Tampilan Visual Visual ini sebesar Area Tampilan Tata Letak.
Saat cubit memperbesar, Anda mengecilkan ukuran Area Pandang Visual yang terkait dengan Tampilan yang Terlihat Tata Letak.
Perilaku pengubahan ukuran area pandang
Saat memfokuskan input atau area yang dapat diedit lainnya, perangkat–sebagian besar perangkat layar sentuh–dapat menampilkan keyboard virtual. Keyboard ini, yang sering disebut sebagai keyboard virtual,memungkinkan pengguna memasukkan konten ke area yang dapat diedit.
Saat melakukannya, browser merespons dengan salah satu cara berikut sehubungan dengan berbagai area pandang:
- Ubah ukuran hanya Area Pandang Visual dan offset Tampilan yang Terlihat Tata Letak.
- Ubah ukuran Tampilan Visual dan Tampilan yang Terlihat.
- Jangan mengubah ukuran Area Pandang Tata Letak atau Area Pandang Visual, yang menempatkan keyboard virtual di atas keduanya.
Ketiga perilaku ini divisualisasikan sebagai berikut:
Bergantung pada kombinasi browser dan OS yang digunakan pengunjung, salah satu perilaku digunakan, di luar kendali Anda.
Memetakan berbagai perilaku perubahan ukuran
Dalam Viewport Investigation Effort-bagian dari Interop 2022, berbagai aspek terkait area pandang diselidiki, untuk setiap kombinasi browser dan OS utama.
Salah satu aspek yang diuji adalah perilaku perubahan ukuran saat OSK ditampilkan. Hal ini menghasilkan klasifikasi berikut:
Grup satu
Browser yang mengubah ukuran Viewport Visual, tidak mengubah Viewport Layout.
- Safari di iOS
- Safari di iPadOS
- Chrome di ChromeOS
- Chrome di iOS
- Chrome di iPadOS
- Edge di iOS
- Edge di iPadOS
Grup dua
Browser yang mengubah ukuran Area Pandang Visual dan Area Pandang Tata Letak.
- Chrome di Android
- Firefox di Android
- Edge di Android
- Firefox di iOS
Grup tiga
Browser yang tidak mengubah ukuran area pandang:
- Tidak ada secara default – Di Chrome pada Android, Anda dapat memilih untuk melakukan perilaku ini dengan menggunakan VirtualKeyboard API
Efek samping dari setiap perilaku
Perbedaan dalam mengubah ukuran berbagai area pandang saat OSK ditampilkan ini menyebabkan perilaku pengukuran dan tata letak situs yang tidak dapat dioperasikan bersama.
Di browser dari grup 1, dengan OSK yang ditampilkan:
- Nilai yang dihitung untuk unit relatif area pandang tetap sama.
- Elemen yang dirancang untuk memenuhi seluruh ruang visual akan mempertahankan ukurannya.
- Elemen yang menggunakan
position: fixedtetap ada di tempatnya dan dapat tertutup oleh OSK.
Di browser dari grup 2, dengan OSK yang ditampilkan:
- Nilai yang dihitung untuk unit relatif area pandang menyusut.
- Elemen yang dirancang agar memenuhi ruang visual akan menyusut secara penuh.
- Elemen yang menggunakan
position: fixeddapat berakhir di tempat lain dalam tata letak.
position: fixed (kotak biru). Tampilkan Safari di iOS (kiri) dan Chrome di Android (tengah dan kanan).
Kecuali jika Anda menggunakan sniffing Agen Pengguna atau mengandalkan skrip yang ekstensif, Anda tidak dapat mengetahui perilaku mana yang digunakan. Anda juga tidak dapat mengubah perilaku tersebut, karena hal ini ditentukan oleh kombinasi browser dan OS pengguna yang mengunjungi situs Anda.
Mengubah perilaku default di Chrome 108
Mulai Chrome 108, Chrome di Android akan menyesuaikan perilaku pengubahan ukuran area pandang agar tidak lagi mengubah ukuran Area Pandang Tata Letak saat keyboard virtual ditampilkan.
Tindakan ini akan menyelaraskan perilaku Chrome di Android dengan Chrome di iOS, iPadOS, Windows, dan CrOS, Safari di iOS dan iPadOS, serta Edge di iOS, iPadOS, dan Windows.
Berkat perubahan ini, penulis dapat mengetahui perilaku mana yang akan digunakan, terlepas dari OS yang digunakan Chrome. Selain itu, hal ini memungkinkan unit relatif area pandang yang stabil: menampilkan atau menyembunyikan OSK tidak memengaruhi unit ini.
Memilih untuk menggunakan perilaku yang berbeda
Jika Anda ingin situs web menggunakan perilaku pengubahan ukuran pra-108, jangan takut. Selain itu, pengiriman di Chrome 108 merupakan ekstensi untuk tag meta area pandang.
Melalui tombol interactive-widget, Anda dapat memberi tahu Chrome perilaku pengubahan ukuran yang Anda inginkan.
Nilai yang diterima untuk interactive-widget adalah:
resizes-visual: Mengubah ukuran hanya Area Pandang Visual, tetapi tidak untuk Area Pandang Tata Letak.resizes-content: Mengubah ukuran Area Pandang Visual dan Area Pandang Tata Letak.overlays-content: Tidak mengubah ukuran area pandang apa pun.
Untuk memilih kembali menggunakan perilaku Chrome “lama” di Android, setel tag meta area pandang ke ini:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Jika Anda tidak menyertakan interactive-widget di tag meta area pandang, Chrome akan menggunakan perilaku default, yaitu resizes-visual.
Divisualisasikan, setelan memiliki efek ini di berbagai area pandang:
resizes-visual, resizes-content, dan overlays-content.
Anda dapat mencoba efek dari setiap nilai di browser di situs demo ini.
Pengujian dan masukan
Kami memperkirakan beberapa perbedaan kecil pada situs yang ada, tetapi diperkirakan perbedaan ini tidak akan memblokir karena Chrome 108 di Android kini akan berperilaku mirip dengan Safari di iOS. Oleh karena itu, situs yang berfungsi dengan baik di Safari di iOS juga akan berfungsi dengan baik di Chrome 108 di Android.
Namun, sebaiknya penulis situs secara aktif menguji situsnya di Chrome 108, yang masih dalam versi beta mulai 27 Oktober 2022. Secara khusus, perhatikan elemen yang menggunakan position: fixed dan/atau mengandalkan unit relatif area pandang.
Masukan dapat dilaporkan di crbug.com. Pastikan untuk menyertakan “keyboard virtual” di judul laporan.