safari La barra de menú de IOS está en conflicto con los botones en el 10% inferior de la pantalla

10

Estoy creando un portal web que debe 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 una anchura y altura del 100% Todo esto funciona bien y mis botones se muestran exactamente como se supone en la parte inferior de la página. Sin embargo, cuando hago clic en los botones, la vista compacta de 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 puedes ver el problema en el simulador de IOS:
Como puede ver, el problema solo ocurre cuando un botón está en el 10% inferior de la vista. Esto es solo un botón normal. Mi código fue revisado por el triple por varios desarrolladores y no tiene errores.

    
pregunta dennismuijs 15.05.2014 - 10:05

2 respuestas

6

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

    
respondido por el nohillside 15.05.2014 - 10:27
5

Creo que puedo haber encontrado una respuesta. Configurando tu 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 por debajo de la ventana gráfica; el valor predeterminado es visible )
  • -webkit-overflow-scrolling: touch (para suavizar cualquier comportamiento de desplazamiento)

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

    
respondido por el jennz0r 12.12.2015 - 02:45

Lea otras preguntas en las etiquetas