La barra de menú Safari IOS entra en conflicto con los botones en el 10% inferior de la pantalla

14

Estoy construyendo un portal web que tiene que ser funcional y bonito en múltiples plataformas. Una de las plataformas es IOS Safari, y esto es donde encontré un problema. En mi código, alineo dos botones flotantes en la parte inferior de un div con un ancho y una altura del 100%. Todo esto funciona bien y mis botones se muestran exactamente como se supone que deben estar en la parte inferior de la página. Sin embargo, cuando hago clic en los botones, la vista compacta del safari móvil cambia a vista completa y mis botones están ocultos detrás de la barra de navegación inferior.

¿Es normal que Safari Mobile muestre el menú expandido cuando el usuario toca el 10% inferior de la pantalla? ¿Cómo puedo evitar esto?

En este gif, puede ver el problema en el simulador IOS: ejemplo
como puede ver, el problema solo ocurre cuando un botón está en el 10% inferior de la vista. Este es solo un botón normal, mi código fue verificado tres veces por varios desarrolladores y no tiene errores.

ios safari development html dennismuijs
fuente
Si enumera su fragmento de código,
márquelo
He creado un error para Safari, comente allí: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

Respuestas:

5

Este es un comportamiento normal en Mobile Safari, al tocar en la parte inferior se mostrarán las diferentes opciones del navegador y se desplazará la página web en consecuencia. Sin embargo, la funcionalidad de la página web permanece igual, por lo que el usuario aún puede tocar el botón después de desplazarse para acceder a cualquier funcionalidad que tenga.

nohillside
fuente
44
Gracias Patrix, sé que esto es normal, pero ¿hay alguna forma de anular este comportamiento a través de html, css o js? Ya he publicado esta pregunta sobre el desbordamiento de pila, pero ya que es algo relacionado con la manzana quizás pide-diferente, conocer una forma
dennismuijs
1
StackOverflow (o incluso un sitio SE donde los desarrolladores web pasan el rato) es mejor para este tipo de cosas que AD (que se centra en los problemas del usuario final). Como acceder a los controles del navegador es de alguna manera esencial para el usuario, dudo que haya una manera de evitar el comportamiento.
nohillside
enlace al desbordamiento de pila q & a para esto?
Ben Roberts
7

Creo que pude haber encontrado una respuesta. Configurar su contenido para que tenga los siguientes estilos:

  • height: 100% (permite que el contenido llene la ventana gráfica y vaya más allá de la parte inferior)
  • overflow-y: scroll(le permite desplazarse debajo de la ventana gráfica; el valor predeterminado es visible)
  • -webkit-overflow-scrolling: touch (para suavizar cualquier comportamiento de desplazamiento)

parece forzar el menú de iOS en Safari para que siempre aparezca. De esa manera, los clics en los botones funcionarán en lugar de abrir el menú Safari. ¡Espero que esto ayude!

jennz0r
fuente
Claro, esto funciona, pero no todos los sitios pueden tolerar la configuración overflow-y: scrollen su área de contenido principal. Este truco tiene efectos secundarios que afectarán a todos sus elementos secundarios. Para decirlo más correctamente, estas propiedades css afectan directamente a todos los elementos secundarios y obligar al menú de safari a mostrar es en realidad el efecto secundario.
zevdg
Gracias. Todavía no he intentado tocar hacia la parte inferior de la pantalla, pero al menos el 10% de mi diseño no está cubierto por la desagradable barra de menús de Safari. Para agregar a esto, también debe dar cada elemento que lo contenga height: 100%. Para una empresa que gana mucho dinero con dispositivos móviles, su experiencia web móvil es horrible.
corysimmons