рядок меню IOS safari в конфлікті з кнопками в нижній частині 10% екрана

14

Я будую веб-портал, який повинен бути функціональним і досить на багатьох платформах. Однією з платформ є IOS Safari, і саме з цим я зіткнувся з проблемою. У своєму коді я вирівнюю дві плаваючі кнопки внизу колу з шириною і висотою 100%. Це все добре, і мої кнопки відображаються точно так, як вони повинні бути внизу сторінки. Однак, коли я натискаю кнопки, компактний вигляд з мобільного сафарі перемикається на повний перегляд, і мої кнопки приховані за нижньою панеллю навігації!

Це нормальна поведінка для safari mobile, щоб показувати розширене меню, коли користувач натискає 10% екрана внизу? Як я можу цього уникнути?

У цьому gif ви можете побачити проблему на тренажері IOS: приклад
Як ви бачите, проблема виникає лише тоді, коли кнопка знаходиться в нижній частині 10% перегляду. Це просто звичайна кнопка, Мій код був потрійно перевірений декількома розробниками, і він не має помилок.

— dennismuijs
джерело

Якщо ви перерахуєте фрагмент свого коду, позначте це, і ми зможемо перейти на стек переповнення ...

— bmike

Я створив помилку для Safari, будь ласка, прокоментуйте її: bugs.webkit.org/show_bug.cgi?id=194235

— sheerun

5

Це звичайна поведінка в мобільному Safari, натискання внизу відобразить різні параметри браузера та прокручує веб-сторінку відповідно. Однак функціональність веб-сторінки залишається однаковою, тому користувач все одно може натиснути кнопку після її прокрутки, щоб отримати доступ до будь-якої функціональності.

— позагір'я
джерело

4

Спасибі Patrix, я знаю, що це нормально, але чи є спосіб змінити цю поведінку через html, css чи js? Я вже розміщував це запитання про переповнення стека, але оскільки це щось пов’язане з яблуком, можливо, запитайте, інший знатиме спосіб

— dennismuijs

1

StackOverflow (або навіть веб-сайт SE, на якому веб-розробники зависають) краще для подібних речей, ніж AD (який зосереджений на питаннях кінцевих користувачів). Оскільки доступ до елементів керування браузером якимось чином важливий для користувача, я сумніваюся, чи є спосіб уникнути поведінки.

— nohillside

посилання на переповнення стека q & a для цього?

— Бен Робертс

7

Я думаю, що я, можливо, знайшов відповідь. Налаштування вашого вмісту у таких стилях:

height: 100% (дозволяє вмісту заповнити вікно перегляду та вийти за межі нижньої частини)
overflow-y: scroll(дозволяє прокручувати нижче вікна перегляду; значення за замовчуванням - visible)
-webkit-overflow-scrolling: touch (щоб згладити будь-яку поведінку прокрутки)

Здається, змушує меню iOS у Safari завжди з’являтися. Таким чином, натискання кнопок дійсно працюватиме замість того, щоб відкривати меню Safari. Сподіваюся, це допомагає!

— jennz0r
джерело

Звичайно, це працює, але не всі сайти можуть терпіти налаштування overflow-y: scrollна основну область вмісту. Цей злом має побічні ефекти, які вплинуть на всі елементи дітей. Якщо говорити правильніше, ці властивості css безпосередньо впливають на всі дочірні елементи, а змушування меню сафарі показувати насправді є побічним ефектом.

— zevdg

Дякую. Я ще не намагався натиснути на нижню частину екрана, але принаймні 10% мого дизайну не прикривається неприємною панеллю меню Safari. Щоб додати до цього, ви повинні дати кожен містить елемент , height: 100%а також. Для компанії, яка заробляє багато своїх грошей на мобільних пристроях, їхній мобільний веб-досвід є жахливим.

— corysimmons