Masalah Cross Browsing yang Saya Alami (Terutama Safari)

Dua permasalahan cross-browsing yang cukup rumit saat mengembangkan web mobile, dan permasalahan lain yang perlu dipertimbangkan akan

saya catat di sini.

Permasalahan Perhitungan Tinggi Viewport karena Address Bar dan Navigation Bar Browser Sendiri

Safari dan Samsung Internet memiliki navigation bar bawaan di bagian bawah browser. Kecuali jika show/hide diatur secara khusus, bar tersebut akan muncul saat layar digulir ke bawah dan akan hilang saat digulir ke atas.

Masalahnya adalah viewport menjadi tidak tetap dan berubah karena hal ini.

Contohnya, jika tinggi diatur ke 100vh, layout akan ditampilkan dengan akurat ketika navigation bar tidak ada, tetapi ketika navigation bar muncul, navigation bar akan menutupi UI.

Untuk mengatasi masalah ini,

1. Gunakan dvh.

Dvh adalah viewport dinamis, yang secara otomatis mencerminkan perubahan setiap kali tinggi viewport berubah. Oleh karena itu, dimungkinkan untuk menangani perubahan layout UI sesuai dengan keberadaan address bar atau bottom navigation.

2. Svh juga dapat dipertimbangkan.

Svh adalah tinggi area UI murni, tidak termasuk address bar atau navigation. Dalam situasi di mana address bar atau navigation diperkirakan akan muncul, menggunakan svh akan lebih akurat.

Permasalahan UI Bergeser karena Keyboard Virtual Saat input Dipilih (focus)

Di Safari mobile, ketika input dipilih, terjadi masalah di mana elemen UI yang sudah ada bergeser karena keyboard virtual. Pada browser lain, keyboard virtual biasanya muncul secara absolute, tetapi pada Safari mobile web, seolah-olah display block diterapkan, sehingga keyboard virtual menempati tempatnya.

Safari menyesuaikan tinggi viewport secara dinamis ketika keyboard virtual muncul, menyebabkan masalah karena elemen yang menggunakan unit vh disesuaikan ulang. Untuk mengatasi hal ini,

1. Gunakan min-height.

Tetapkan tinggi agar UI tidak bergeser.

2. Terapkan vendor prefix. (akan dijelaskan selanjutnya)

Masukkan atribut yang diterapkan pada browser tertentu seperti Safari.

3. Kontrol viewport secara dinamis dengan JavaScript.

* Cara ini tidak disarankan. Layout akan berkedip karena tinggi scroll bergerak secara tiba-tiba.

Gunakan event resize untuk mendeteksi perubahan viewport dan terapkan style yang sesuai.

3-1. Kontrol posisi saat event focusin terjadi.

3-2. Kontrol posisi saat keyboard virtual muncul. (pada contoh di bawah, class diterapkan)

Cara terbaik adalah menyelesaikannya sepenuhnya hanya dengan CSS, tetapi jika masalah tidak dapat diselesaikan dengan contoh di atas, periksa apakah elemen tersebut memiliki position: absolute atau fixed, dan coba ubah CSS dengan menghapus atribut top, right, left, bottom.

Lain-lain

Selain itu, saya menemukan beberapa hal yang perlu dipertimbangkan saat mengembangkan web mobile di Safari.

1. Gunakan vendor prefix saat menggunakan beberapa atribut.

* Vendor prefix adalah awalan yang memungkinkan browser untuk memahami dan merender atribut CSS tertentu, dan memastikan bahwa CSS yang diimplementasikan secara berbeda oleh setiap browser diterapkan sesuai keinginan. Dengan ini, konsistensi antar browser yang sama dapat dipertahankan, dan kompatibilitas dengan browser versi lama juga dapat dijaga.

Jenis

-webkit-: Chrome, Safari, dll.
-moz-: Mozilla Firefox
-ms-: Internet Explorer dan Edge
-o-: Opera

Atribut-atribut yang biasanya membutuhkan vendor prefix adalah sebagai berikut.

Selain itu, Safari membatasi kapasitas LocalStorage dan SessionStorage sekitar 5MB, dan tidak berbagi ruang penyimpanan antar tab, jadi perlu diperhatikan.