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

Estoy construyendo un portal web que tiene que ser funcional y bonito en múltiples plataformas. Una de las plataformas es IOS Safari, y aquí 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 funciona bien y mis botones aparecen exactamente como se supone que deben aparecer 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: ejemplo
Como puedes 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 revisado tres veces por varios desarrolladores y no tiene errores.

Si enumera su fragmento de código, márquelo y podemos migrar al desbordamiento de pila...
Creé un error para Safari, comente allí: bugs.webkit.org/show_bug.cgi?id=194235
¿Todavía nadie ha solucionado esto?

Respuestas (2)

Este es un comportamiento normal en Mobile Safari, tocar en la parte inferior mostrará las diversas opciones del navegador y desplazará la página web hacia arriba en consecuencia. 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.

Gracias Patrix, sé que esto es normal, pero ¿hay alguna forma de anular este comportamiento a través de html, css o js? Ya publiqué esta pregunta en el desbordamiento de la pila, pero dado que es algo relacionado con Apple, tal vez pregunte: diferente sabrá cómo hacerlo.
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 forma de evitar este comportamiento.
enlace a las preguntas y respuestas de desbordamiento de pila para esto?
¿Cuál es el tamaño real de esto en píxeles? No puedo encontrarlo en ninguna parte... 56px no es suficiente. ¿Cómo se llama esta "zona muerta"?

Creo que pude haber encontrado una respuesta. Configuración de su contenido para tener 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 manera, los clics en los botones funcionarán en lugar de abrir el menú Safari. ¡Espero que esto ayude!

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 de manera más correcta, estas propiedades css afectan directamente a todos los elementos secundarios y obligar a que se muestre el menú de safari es en realidad el efecto secundario.
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 odiosa barra de menú de Safari. Para agregar a esto, también debe proporcionar todos los elementos height: 100%que lo contienen. Para una empresa que gana mucho dinero con dispositivos móviles, su experiencia web móvil es horrible.
@corysimmons Como hemos visto con WebRTC y aún vemos con Push API , Apple está tratando de que los desarrolladores creen una aplicación nativa si desea mucho más que mostrar una página simple.
La barra de menú de Safari IOS entra en conflicto con los botones en el 10 % inferior de la pantalla
RespuestasAquíPolítica de privacidad1y, 0v