ios - segundo - ubicacion iphone por gps

Entrada de iOS enfocada dentro del padre fijo detiene la actualización de posición de elementos fijos

Question

Lo siguiente sucede en Mobile Safari iOS 6.1.2

pasos para reproducir

Crear una position: fixed elemento position: fixed con un elemento <input type="text"> dentro de él.

Resultado actual

1. Entrada - no enfocada

   La posición de los elementos fijos es correcta cuando la entrada no está enfocada.

2. Entrada - enfocada

   Cuando se enfoca la entrada, el navegador ingresa a un modo especial en el que ya no actualiza la posición de los elementos fijos (cualquier elemento posicionado fijo, no solo el elemento primario de la entrada) y mueve toda la ventana hacia abajo para hacer las entradas elemento padre se sienta en el centro de la pantalla.

   Vea demostración en vivo: http://jsbin.com/oqamad/1/

Resultado Esperado

La posición de los elementos fijos siempre se respeta.

¿Solución o solución?

Cualquier pista sobre cómo forzar a Safari a mostrar correctamente los elementos fijos sería útil.

Preferiría una solución alternativa que no implique usar position: absolute y establecer un controlador de eventos onscroll .

Answer 1

Es un error muy conocido en Safari, tanto en iPad como en iPhone.

Una solución alternativa es cambiar la posición a absoluta para todos los elementos configurados con posición fija.

En caso de que esté utilizando Modernizr, también puede orientar los dispositivos móviles de esta manera:

código jQuery

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on(''focus'', ''input'', function(e) {
            $(''body'').addClass(''fixfixed'');
        })

        .on(''blur'', ''input'', function(e) {
            $(''body'').removeClass(''fixfixed'');
        });

      }

});

CSS

Si quiero orientar solo el encabezado y el pie de página, por ejemplo, que están configurados con posición fija, cuando la clase ''fixfixed'' se agrega al cuerpo, puedo cambiar la posición a absoluta para todos los elementos con posición fija.

.fixfixed header, .fixfixed footer {
  position: absolute;
}

Answer 2

Posición: Fixed tiene muchos errores conocidos, puedes consultarlos aquí: artículo de Remysharp . Probablemente aún pueda corregir algunos de ellos usando las respuestas de esta pregunta: CSS "position: fixed;" en iPad / iPhone?

¡Buena suerte!

Answer 3

Sí, esto es específicamente un problema de safari de iOS desde v5. Si usa Chrome en iOS, notará que funcionará correctamente. El método que utilizo para solucionar esto es crear y agregar un elemento de estilo al cuerpo y, posteriormente, eliminarlo y luego centrarme en el elemento.

¡No me preguntes por qué funciona esto, demasiadas horas de prueba y error!

También noté que después de la primera vez que esto se solucionó, no es necesario realizar el truco de estilo para los siguientes elementos de posición fija