¿Cómo puedo evitar el desplazamiento salvaje cuando un campo de formulario de entrada de texto de posición fija obtiene el foco?

Tengo una aplicación web móvil que muestra un cuadro de diálogo dentro de una posición: elemento fijo que superpone toda la pantalla. No importa cuánto contenido se muestra o hasta qué punto la página se ha desplazado, el elemento de superposición oscurece el contenido de la página y el cuadro de diálogo aparece encima de todo. Hay un campo <input type="search /> en el cuadro de diálogo.

En Android, cuando el usuario teclea el campo de entrada para darle enfoque, se produce un comportamiento bastante errático a menudo (pero no siempre):

Aparece el teclado suave, y luego desaparece inmediatamente.
La página subyacente (cubierta por la superposición) se desplaza por unas pocas docenas de píxeles, a veces hacia arriba, a veces hacia abajo, a veces en ambas direcciones ya veces repetidamente. Esto también sucede cuando el campo de entrada pierde foco.
El elemento de superposición cambia momentáneamente unos píxeles hacia abajo y hacia la derecha, revelando el contenido subyacente a lo largo de los bordes superior e izquierdo de la pantalla. (Vuelve a colocar menos de un segundo más tarde.)

Esto está en Android 2.3.4 con el navegador incorporado. También puede ocurrir en otras versiones de Android.

La página construyó algo como esto: (Tenga en cuenta que algunas de estas peculiaridades sólo aparecen cuando la página contiene suficiente contenido para permitir el desplazamiento.)

 <head> <style type="text/css"> #menuoverlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: rgba(0,0,0,.75); text-align: center; } #menu { display: inline-block; margin-top: 1em; border: 3px solid #02b; border-radius: 8px; padding: 1ex; background-color: black; color: silver; } </style> </head> <body> <div id="menuoverlay"> <div id="menu"> ...menu items... ...menu items... <form action=""><input type="search"/></form> </div> </div> <div id="content"> ...lots of stuff... ...lots of stuff... ...lots of stuff... </div> <body>

¿Alguien más ha visto este comportamiento? ¿Has encontrado una manera de prevenirlo?

Recorrer la web me llevó a algunos informes de problemas similares. He aquí un resumen de lo que he leído hasta ahora:

En muchos dispositivos Android, el navegador incorporado no utiliza aparentemente los campos de entrada de WebKit como se esperaría. En cambio, cuando los campos definidos por html se centran, el navegador intenta cubrirlos con nuevos widgets de texto que crea por separado.
Estos campos de texto duplicados a menudo ignoran el estilo css, creando un efecto donde los campos parecen diseñados hasta que se generan el foco y, de repente, vuelven al estilo predeterminado del sistema.
El navegador de Android a menudo no puede colocar estos campos duplicados correctamente. Cuando están fuera de lugar, a veces son visibles, pero otras veces sólo mueven los objetivos de enfoque sin ninguna indicación visual de que se han movido.
Estos problemas a menudo aparecen cuando el elemento ancestral de un campo de entrada tiene estilos como transform: translate3d() , -webkit-backface-visibility o position: fixed .

Estos son algunos enlaces relevantes:

Android Navegador textarea se desplaza por todo el lugar, es inutilizable

¿Cómo puedo diseñar una etiqueta HTML INPUT para que mantenga CSS cuando se centre en Android 2.2+?

Navegador nativo de Android 2.2 / 2.3 y posicionamiento fijo

Me las arreglé para evitar el cambio de superposición momentánea estableciendo outline: none en mi elemento de input .

Tengo el desplazamiento de página salvaje y desaparecer el teclado para establecerse mediante la configuración de overflow: hidden en el body html cuando se muestra el cuadro de diálogo y, a continuación, la eliminación de nuevo al ocultar el diálogo. Esto tiene un efecto secundario desagradable de restablecer la posición de desplazamiento de la página, por lo que guardarlo y restaurarlo según sea necesario, y envolver todo este hackery en condicionales por lo que sólo se ejecuta en Android. (Espero que mis usuarios de Android no se distraigan demasiado al ver que el contenido de la página cambia bajo la superposición semitransparente mientras el diálogo está abierto).

Curiosamente, también pude evitar el desplazamiento de página salvaje al capturar el evento touchstart en mi elemento de superposición y llamar a preventDefault (). Esto me hace preguntarme si toda esta locura fue causada por una secuencia de eventos como este:

touchstart burbujea hasta la raíz del documento
El navegador ve touchstart donde se colocó el campo de entrada duplicado
El navegador da el foco al campo de entrada
Aparece un teclado suave que permite escribir en el campo de entrada
Viewport se redimensiona para acomodar el teclado suave
Cambiado de tamaño durante el evento táctil parece un toque arrastrar al navegador
Arrastre espurio hace que la página se desplace y deseche el teclado

No touchstart cogiendo touchstart para resolver el problema, ya que evitó que el campo de entrada de ganar el enfoque, y llamar a focus() de javascript simplemente no funcionó. He leído que el navegador Android inhabilita el método focus() en los campos de entrada, lo que explicaría este comportamiento. Tal vez hace esto porque no funcionaría con los widgets de texto duplicados que crea sobre los campos definidos por html.

En mi caso, la "posición: fijo;" No es el problema, "vertical-alinear: centro;" O "-webkit-box-align: center;" Empujar hacia atrás y cerrar el teclado suave, para utilizar "-webkit-box-align: start;" Resuelto mi problema.