un error con iOS5 (Safari), una "posición: div fijo', y las formas de altura

Question

Todo,

Estoy trabajando en una aplicación web que incluye una muy ' forma vertical'(Por alto, significa que se trata de varios cientos por ciento más alta que la de una típica).

el diseño requiere de un "pie" anclado en el fondo de la pantalla que es siempre visible, independientemente de la posición del usuario en el formulario.

en en otras palabras, el pie de página debe ser visible independientemente de si el usuario está cerca de la parte superior, central o inferior del formulario, y el formulario debe desplazarse "debajo" de él.

Para implementar esto, he creado el pie de página como un div con position:fixed y bottom:0.

Esto funciona perfectamente en todos los navegadores que he probado, incluido Safari en iOS5.

excepto que no UNO insecto ...

Si el usuario se encuentra cerca de la parte superior del formulario, y sitúa el foco en uno de los campos de texto - como era de esperar, el IOS muestra el teclado.

Cada vez que el usuario haga clic en Siguiente, iOS "pestañas" al campo siguiente.

A medida que avanza por el formulario haciendo clic repetidamente en Next, iOS "desplaza automáticamente" el formulario, por lo que su posición en el formulario permanece visible.

Sin embargo, iOS no parece actualizar la posición del divisor de pie de página position:fixed - se desplaza incorrectamente junto con el resto del formulario.

Si el usuario cierra el teclado, el div se restaura en su lugar "correcto", por lo que este no es un error irrecuperable. Pero, el hecho de que el pie de página se mueva es un problema flagrante.

¿Es esto un error o inconveniente con la implementación de iOS de position:fixed? O, ¿hay algo que estoy haciendo mal?

¡Muchas gracias de antemano!

[ACTUALIZACIÓN]

Remy Sharp (bien llamada) acaba de escribir un excelente y detallado post acerca de una variedad de errores y problemas con position:fixed en IOS/Safari: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/. Es una lectura obligada si está pensando en utilizar position:fixed en un sitio destinado a usuarios de iOS ...

Answer 1

Sé que position:fixed no era compatible originalmente en las versiones anteriores de iOS, sé que iOS5 sí lo admite, pero tengo tenido problemas con eso en el pasado. Si su pie de página es una especie de barra de control, le sugiero que utilice un pie de página adhesivo CSS, luego todas las páginas/contenido podrían cargarse en un div arriba.

Answer 2

¿Estás utilizando jQuery?Si es así, sospecho algo así como este trabajo trabajo:

$(":input").focus(function() { 
    $(window).scrollTop($(window).scrollTop() + 1); 
}); 

desplazándose por el 1px página después de enfocar un nuevo elemento de formulario que debe restablecer atributo parte inferior del elemento fijo.

Answer 3

Aquí está la solución, sin que el pie de página salte sobre usted.

1. primero se ajusta el encabezado y el cuerpo/sección en un div. Haz que div se pueda desplazar.
2. de la posición absoluta del pie de página y la posición relativa de todo lo demás.
3. agregar alturas fijas.

Vea funcionar aquí, http://yinnetteolivo.com/footerbottom.html

Su bienvenida :)

Answer 4

Ninguna de las otras respuestas que he encontrado para este error han trabajado para mí. Pude solucionarlo simplemente desplazando la página hacia arriba 34px, la cantidad de safari móvil lo desplaza hacia abajo. con jquery:

$('.search-form').on('focusin', function(){ 
    $(window).scrollTop($(window).scrollTop() + 34); 
}); 

Esto obviamente tendrá efecto en todos los navegadores, pero evita que se rompa en iOS.