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

14

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

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

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

ios safari development html dennismuijs
источник
Если вы перечислите свой фрагмент кода,
отметьте
Я создал ошибку для Safari, пожалуйста, прокомментируйте там: bugs.webkit.org/show_bug.cgi?id=194235
Sheerun

Ответы:

5

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

Nohillside
источник
4
Спасибо, Патрикс, я знаю, что это нормально, но есть ли способ переопределить это поведение через html, css или js? Я уже публиковал этот вопрос о переполнении стека, но поскольку это что-то, связанное с яблоком, возможно, спросите - другой найдет способ
dennismuijs
1
StackOverflow (или даже сайт SE, где веб-разработчики тусуются) лучше для такого рода вещей, чем AD (который ориентирован на проблемы конечных пользователей). Поскольку доступ к элементам управления браузером так или иначе важен для пользователя, я сомневаюсь, что есть способ избежать поведения.
холме
ссылка на переполнение стека Q & A для этого?
Бен Робертс
7

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

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

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

jennz0r
источник
Конечно, это работает, но не все сайты могут терпеть настройки overflow-y: scrollв своей основной области контента. У этого хака есть побочные эффекты, которые затронут все его дочерние элементы. Короче говоря, эти свойства CSS напрямую влияют на все дочерние элементы, и принудительное отображение меню safari на самом деле является побочным эффектом.
zevdg
Спасибо. Я еще не пробовал нажимать на нижнюю часть экрана, но по крайней мере 10% моего дизайна не покрывается отвратительной строкой меню Safari. Чтобы добавить к этому, вам также нужно указать каждый содержащий элемент height: 100%. Для компании, которая зарабатывает много денег на мобильных устройствах, их опыт работы в Интернете ужасен.
корисиммоны