Строка меню Safari IOS конфликтует с кнопками в нижних 10% экрана

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

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

В этом gif вы можете увидеть проблему на симуляторе IOS:
как вы можете видеть, проблема возникает только тогда, когда кнопка находится в нижних 10% просмотра. Это обычная кнопка. Мой код был проверен тройным образом несколькими разработчиками и не содержит ошибок.

Это нормальное поведение в Mobile Safari, при нажатии в нижней части экрана будут отображаться различные параметры браузера и соответственно прокручиваться веб-страница вверх. Тем не менее, функциональность веб-страницы остается прежней, поэтому пользователь может по-прежнему нажимать на кнопку после ее прокрутки, чтобы получить доступ к любой функциональности, которую он имеет.

Я думаю, что, возможно, нашел ответ. Настройка вашего контента на следующие стили:

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

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