Hola a todos.

Estamos haciendo un mini juego de preguntas que se muestra directamente en un sitio web con html, css y js. Tengo los tags html y body con "overflow:hidden; width:100vw; height:100vh;" para ocupar todo el navegador.

Al visualizarlo con iPhone, el menú inferior de iPhone me queda sobrepuesto encima de la web y me tapa algunos elementos importantes. En un ppio no hay más problema que dar padding-bottom al elemento cuando se visualiza en iPhone, para que se posicione algo más arriba.

El problema está en que una vez que el usuario ha completado una pregunta, ese menú ya no se sobrepone a la web, simplemente se posiciona debajo, entonces ese arreglo del padding-bottom hace que se suba todo el contenido haciendo que parte de este no se ni visualizable.

Matizar que esto ocurre se complete o se intente completar, solo con que aparezca el teclado ya tengo el problema. Lo del padding-bottom es una de las opciones, pero he dado un alto fijo al contenedor, un margin-bottom al elemento hijo, etc. he intentado disstintas formas y siempre sucede. También he maquetado las 2 pantallas en las que me ocurre esto con flex, con block y tamaños fijos, vamos he provado varias formas y siempre me topo con el mismo problema.

¿Alguien se ha topado con un problema similar y me sabe orientar?

Gracias.