safari menu IOS konflik dengan tombol di bawah 10% dari layar

14

Saya sedang membangun portal web yang harus fungsional dan cantik di berbagai platform. Salah satu platform adalah IOS Safari, dan ini adalah saya mengalami masalah. Dalam kode saya, saya menyelaraskan dua tombol mengambang ke bagian bawah div dengan lebar dan tinggi 100% Ini semua berfungsi dengan baik dan tombol saya muncul persis seperti yang seharusnya ada di bagian bawah halaman. Namun ketika saya mengklik tombol, tampilan ringkas dari safari seluler beralih ke tampilan penuh dan tombol saya tersembunyi di belakang bilah navigasi!

Apakah perilaku normal safari mobile untuk menampilkan menu yang diperluas ketika pengguna mengetuk di bawah 10% dari layar? Bagaimana saya bisa menghindari ini?

Dalam gif ini Anda dapat melihat masalah pada simulator iOS: contoh
Seperti yang Anda lihat masalahnya hanya terjadi ketika tombol berada di bawah 10% dari tampilan. Ini hanya tombol normal, kode saya tiga kali diperiksa oleh beberapa pengembang dan tidak ada kesalahan.

ios safari development html dennismuijs
sumber
Jika Anda mencantumkan cuplikan kode Anda,
beri
Saya telah membuat bug untuk Safari, silakan berkomentar di sana: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

Jawaban:

5

Ini adalah perilaku normal di Mobile Safari, mengetuk di bagian bawah akan menampilkan berbagai opsi browser dan menggulir halaman web ke atas. Fungsionalitas halaman web tetap sama, sehingga pengguna masih dapat mengetuk tombol setelah digulir untuk mengakses fungsionalitas apa pun yang dimilikinya.

nohillside
sumber
4
Terima kasih Patrix, saya tahu ini normal, tetapi apakah ada cara untuk mengganti perilaku ini melalui html, css atau js? Saya sudah memposting pertanyaan ini pada stack overflow tetapi karena ini adalah sesuatu yang berhubungan dengan apple, mungkin bertanya-berbeda akan tahu caranya
dennismuijs
1
StackOverflow (atau bahkan situs SE tempat pengembang web nongkrong) lebih baik untuk hal semacam ini daripada AD (yang berfokus pada masalah pengguna akhir). Karena mengakses kontrol peramban sangat penting bagi pengguna, saya ragu apakah ada cara untuk menghindari perilaku tersebut.
nohillside
tautan ke stack overflow q & a untuk ini?
Ben Roberts
7

Saya pikir saya mungkin telah menemukan jawaban. Mengatur konten Anda agar memiliki gaya berikut:

  • height: 100% (memungkinkan konten untuk mengisi viewport dan melampaui bagian bawah)
  • overflow-y: scroll(memungkinkan Anda untuk menggulir di bawah viewport; nilai default adalah visible)
  • -webkit-overflow-scrolling: touch (untuk memperlancar setiap perilaku gulir)

tampaknya memaksa menu iOS di Safari untuk selalu muncul. Dengan begitu, klik tombol akan benar-benar berfungsi alih-alih membuka menu Safari. Semoga ini membantu!

jennz0r
sumber
Tentu, ini berhasil, tetapi tidak semua situs dapat mentoleransi pengaturan overflow-y: scrollpada area konten utama mereka. Retas ini memiliki efek samping yang akan memengaruhi semua elemen anak-anak itu. Untuk membuatnya lebih benar, properti css ini secara langsung mempengaruhi semua elemen anak-anak dan memaksa menu safari untuk ditampilkan sebenarnya adalah efek sampingnya.
zevdg
Terima kasih. Belum mencoba mengetuk ke arah bawah layar, tetapi setidaknya 10% dari desain saya tidak ditutup-tutupi oleh menu bar Safari yang menjengkelkan. Untuk menambahkan ini, Anda harus memberikan setiap elemen yang mengandung height: 100%juga. Bagi perusahaan yang menghasilkan banyak uang dari perangkat seluler, pengalaman web seluler mereka mengerikan.
corysimmons