html - son - Los botones alineados con la parte inferior de la página entran en conflicto con la barra de menús de Safari para dispositivos móviles

menu vista de word 2013 (3)

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ú 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!

Estoy construyendo 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 tres veces por varios desarrolladores y no tiene errores.

Resulta que este es el comportamiento estándar en safari mobile y, como tal, no se puede sobrescribir, tal vez en una futura actualización de IOS esta funcionalidad cambie.

Sé que esta pregunta es un poco antigua, pero como el problema persiste, pensé que debería compartir mi experiencia ...

A partir de ahora NO hay una solución para el problema, pero hay una solución. La solución que proporcionó jennz0r puede funcionar para algunos, pero no me gustó la idea de que la barra de menú siempre se muestre. Vi un sitio web que tenía el problema resuelto ... bueno, al menos parecía funcionar. No encontré nada en sus css o js.

Entonces, ¿cuál fue la solución? Como la "zona muerta" tiene una altura de 44 píxeles, simplemente hicieron que su barra flotante tuviera una altura de 88 píxeles: D ¡ Los usuarios pulsaban instintivamente en la parte superior / centro del botón y casi siempre funcionará al primer intento!

"Si es estúpido, pero funciona ... no es estúpido ...";)