Кнопки, расположенные в нижней части страницы, конфликтуют с панелью меню Safari для мобильных устройств

Я создаю веб-портал, который должен быть функциональным и красивым на нескольких платформах.
Одной из платформ является IOS Safari, и это я столкнулся с проблемой.
В моем коде я выравниваю две плавающие кнопки в нижней части div с шириной и высотой 100%
Все это прекрасно работает, и мои кнопки отображаются точно так же, как и в нижней части страницы.
Однако, когда я нажимаю кнопки, компактный вид с мобильного сафари переключается на полный просмотр, а мои кнопки скрыты за нижней навигационной панелью!

Является ли обычное поведение для сафари-мобильника отображать расширенное меню, когда пользователь нажимает на нижние 10% экрана?
Как я могу избежать этого?

В этом gif вы можете увидеть проблему на симуляторе IOS:

Как вы можете видеть, проблема возникает только тогда, когда кнопка находится в нижних 10% просмотра. Это обычная кнопка, мой код был трижды проверен несколькими разработчиками и не имеет ошибок.

Ответ 1

Думаю, я нашел ответ. Настройка вашего контента на следующие стили:

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

похоже, заставляет меню iOS в Safari всегда отображаться. Таким образом, кнопки будут работать, а не открывать меню Safari. Надеюсь, это поможет!

Ответ 2

Оказывается, это стандартное поведение в сафари-мобиле и как таковое не может быть перезаписано, возможно, в будущем обновлении IOS эта функциональность изменится.

Ответ 3

Я знаю, что этот вопрос немного устарел, но поскольку проблема все еще существует, я думал, что должен поделиться своим опытом...

На данный момент нет проблемы с исправлением проблемы, но есть обходной путь. Решение jennz0r, возможно, может работать для некоторых, но мне не нравилось, что панель меню всегда отображается. Я видел веб-сайт, на котором проблема была решена... ну, похоже, она работала как минимум. Я ничего не нашел в своих css или js.

Так в чем же была проблема? Так как "мертвая зона" составляет 44 пикселя в высоту, они просто сделали свой плавающий стержень 88px height: D Пользователи инстинктивно коснутся верхней/центральной кнопки, и она почти всегда будет работать с первой попытки!

"Если это глупо, но это работает... это не глупо...";)