PREGUNTA: Basado en los ejemplos dados para aplicaciones web de pantalla de inicio en iOS7 Safari, ¿cómo puedo lograr un encabezado fijo y persistente que nunca se deslice fuera de la vista y formar campos de entrada que se desplazan hacia la vista cuando se toca?

Los dos ejemplos tienen una diferencia, uno tieneheight=device-height en la ventana gráfica, el otro no.

Sin altura del dispositivo

<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />

Manifestación:http://run.plnkr.co/plunks/SU8Csk/

Editar enlace:http://plnkr.co/edit/SU8Csk

El bueno: El encabezado fijo no cambia la posición / altura al tocar los campos.

El malo: El usuario no puede ver el campo enfocado sin desplazarse manualmente o presionar el botón 'siguiente'. Esto puede ser muy tedioso, especialmente si los campos están en una página que no se desborda.

Con altura del dispositivo

<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />

Manifestación:http://run.plnkr.co/plunks/rPoyaB/

Editar enlace:http://plnkr.co/edit/rPoyaB

El bueno: El usuario se desplaza al campo enfocado según lo deseado.

El malo: El encabezado fijo se desplaza completamente fuera de la vista, esto debe mantenerse en la pantalla en todo momento. El escenario es que contendrá un botón de cancelar y un botón de guardar que siempre debe estar accesible. Además, cuando el campo está borroso, el encabezado se ve aplastado hasta que el usuario lo desplaza hacia abajo, pero si el desbordamiento está desactivado, entonces ni siquiera pueden hacer esto.

El feo: En mi código real, no trivial, lejos de estos ejemplos simplificados, hay un montón de elementos que se colocan absolutamente dentro del encabezado para crear un efecto de 'pestaña' de línea curva, la alineación de estos se apaga por completo.

Debería poder abrir cada URL de demostración en iOS7 Safari, agregarla a la pantalla de inicio y ejecutarla para demostrar el problema.

¿Cuál es la mejor manera de resolver esto?

NOTA: Soy consciente de que hay 'errores' en iOS7 Safari, particularmente cuando se trata de aplicaciones web de pantalla de inicio, sin embargo, creo que puede existir una solución relacionada con la forma en que estoy estructurando la página. He realizado una gran cantidad de investigación (ver más abajo) pero estoy luchando por encontrar una solución.

Enlaces relacionados al problema de 'encabezado fijo': Necesita un encabezado fijo en ios7 +, ¿Cómo se obtiene un encabezado fijo para permanecer en la parte superior de la página?, Encabezados fijos con campos de texto en sitios web de safari móvil, iOS 5 posicionamiento fijo y teclado virtual, Problemas con encabezado fijo, pie de página y barra lateral en ipad / iphone, CSS "posición: fija;" en iPad / iPhone?, Posicionamiento fijo en Mobile Safari, ¿Cómo evito que mi navegación fija se mueva así cuando el teclado virtual se abre en Mobile Safari?, aplicación web: problema de altura del dispositivo / teclado, El elemento div no se quedará en la parte inferior cuando esté presente el teclado virtual ios 7, Aplicación web iOS: deshabilite el enfoque automático en el campo de entrada de texto, posición desaparecida encabezado fijo en ios7 mobile safari, http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/, https://github.com/jquery/jquery-mobile/issues/5532, http://dansajin.com/2012/12/07/fix-position-fixed/

Enlaces relacionados al problema 'los campos de entrada no se enfocan': formularios webkit-overflow-scrolling rotos en la aplicación web de pantalla completa iOS 7, Problema con iOS 7 Mobile Safari Scroll Events en el teclado arriba y abajo, ios7 problemas con el enfoque webview cuando se usa el teclado html, ¿Cómo enfoco un campo de texto HTML en un iPhone (haciendo que aparezca el teclado)?, Campo de texto de Safari Autofocus móvil, El navegador del iPad requiere un toque extra después de agregar la entrada, Al tocar el campo de entrada de texto en el iPhone aparece el teclado, pero al escribir no se colocará ningún texto, `-webkit-overflow-scrolling: touch` roto para elementos inicialmente fuera de pantalla en iOS7, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, http://calendee.com/ios-7-kills-forms-in-html5-apps/