ios7 - Área gris visible cuando se cambia de vertical a horizontal con iOS 7.1 minimal-ui

mobile-safari viewport

Question

En una aplicación web en la que estoy trabajando, probé la nueva función de minimal-ui iOS 7.1 (vea la pantalla completa de safari en iOS 7.1 con etiqueta meta de interfaz de usuario mínima ), pero estoy viendo un problema donde un área gris de 84 píxeles aparece en la parte inferior cuando cambio de vertical a horizontal. Además, document.body.scrollTop cambia a 64 después de cambiar a horizontal.

Puede ver el problema utilizando esta aplicación web "Hello World" : http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html

Cuando cargo la aplicación en Mobile Safari en iPhone 7.1 iPhone Retina Simulator, todo está bien en modo retrato. Sin embargo, al cambiar a paisaje, el área gris aparece inmediatamente.

¿Cuál es una buena manera de solucionar este problema?

Answer 1

Desplazarme hasta la parte superior después de que la página se haya procesado me ayudó. De alguna manera causa una nueva solicitud y el cuadro gris desaparece, sin embargo no puedo explicar qué hace exactamente Safari internamente:

window.scrollTo(0, 0);

Answer 2

El problema parece ser un error en iOS 7.0 y 7.1 hasta ahora. Solo he podido reproducirlo cuando uso el dispositivo en modo horizontal.

Sucede en tres situaciones que conozco y, en todos los casos, el hackeo window.scrollTo(0, 0) resuelve.

1. Al girar el dispositivo hacia el paisaje. Se puede resolver con:

   $(window).on(''orientationchange'', function () {
     window.scrollTo(0, 0);
   });

2. Al arrastrar desde la parte inferior del documento. Resuelto manejando el evento scroll :

   $(window).on(''scroll'', function () {
     var focusedElement;
   
     if ($(document).scrollTop() !== 0) {
       focusedElement = $('':focus'');
       if (!(focusedElement.is(''input'') || focusedElement.is(''textarea''))) window.scrollTo(0, 0);
     }
   });

   Las excepciones para los elementos enfocados son necesarias porque cuando se abre el teclado de la pantalla, también activará un evento de desplazamiento en la ventana.

3. Al cerrar el teclado, entonces, todos los elementos pierden el foco:

   formLayer.on(''blur'', ''input, textarea'', function () {
     if (!$('':focus'').length) window.scrollTo(0, 0);
   });

Dado que este problema solo es relevante para las versiones de iOS 7.0 y 7.1, es mejor limitar este pirateo a la siguiente expresión:

var buggyIOS = //b(?:iPhone|iPod|iPad).*?/bOS 7_[01]/.test(window.navigator.userAgent);

Answer 3

Estaba leyendo este post tratando de evitar el mismo problema y encontré otra forma de hacerlo.

Primero, detectemos si el dispositivo giró (también podríamos detectar luego si es vertical u horizontal), para hacerlo, configuraré una var para verificar las mediaqueries desde JS:

var mql = window.matchMedia("(orientation: portrait)");

Luego podemos escuchar si hay algún cambio y reescribir la ventana gráfica:

    mql.addListener(function(m) {
        $(''meta[name="viewport"]'').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // No matter if is landscape or portrait
    });

O podríamos ser más específicos y disparar algo diferente para el paisaje / retrato.

    mql.addListener(function(m) {
        if(m.matches) {
            $(''meta[name="viewport"]'').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // Portrait
        }
        else {
            $(''meta[name="viewport"]'').attr("content","width=device-width, user-scalable=no, maximum-scale=1.0"); // Landscape
        }
    }); 

Espero que esto pueda ayudarte!

Answer 4

Intenté por un tiempo arreglar esto sin suerte. Finalmente decidí hacer una prueba donde yo:

1. Creé un nuevo documento HTML con la meta etiqueta minimal-ui .
2. Deje el cuerpo del documento vacío (sin etiquetas HTML) y sin estilos.

Probado esto y el problema sigue ocurriendo.

La única conclusión que se me ocurre es que se trata de un error en iOS 7.1 , por lo que presenté un informe de errores a Apple. Fue reportado como ERROR #: 16335579 .

Tenga en cuenta que la solución del Sr. kraftwer1 funcionó para mí (es un truco, pero tendrá que hacerlo hasta que Apple arregle esto). Es decir, agregando ... window.scrollTo(0, 0); Después de la orientationChange funciona.

Finalmente, solo quería mencionar que enviar informes de errores adicionales sobre este problema a Apple aumentará su prioridad en su cola.

Answer 5

La mejor solución que he encontrado está here por Alexander Koleda.

window.addEventListener(''scroll'', function () {
    if (document.activeElement === document.body && window.scrollY > 0) {
        document.body.scrollTop = 0;
    }
}, true);

Esto también corrige la barra gris cuando se desplaza a la parte inferior.

Answer 6

Refinando en la solución window.scrollTo(0,0) , lo encapsulo en una expresión de función invocada de forma automática y la ejecuto en el documento listo y el tamaño de la ventana:

(function minimalUiFix() {
  var fix = function () {
    window.scrollTo(0,0);
  };

  $(fix);
  $(window).on(''resize.minimal-ui-fix'', fix);
})();

El beneficio es que todo el código relacionado con el trabajo alrededor encapsulado y la razón para el trabajo se describe en el nombre de la función. Esto protege al resto de mi hermoso código de ser contaminado (demasiado) por extraños alrededores.

Están pasando muchas cosas, pero lo estoy usando en este jsbin .

Este truco no parece hacer el truco para mí. Echa un vistazo a este jsbin . Lo que tengo aquí es bastante simple: un contenedor de posición fija con un desbordamiento oculto que debería ocupar toda la pantalla. El desplazamiento no debería ser posible, sin embargo, todavía obtengo espacio de desplazamiento no deseado. Todo lo que hace este truco es desplazarse hacia la parte superior. No elimina el misterioso espacio extra que está causando el problema real.

Sin embargo, la aplicación de la corrección en el desplazamiento, además de listo y redimensionado, parece ser el trabajo más cercano que podría encontrar.

(function minimalUiFix() {

  var fix = function () { window.scrollTo(0,0); };
  $(fix);
  $(window).on(''resize.minimal-ui-fix'', fix);
  $(window).on(''scroll.minimal-ui-fix'', fix);

})();

Creo que esto es lo mejor que podemos esperar hasta que Apple solucione Mobile Safari u otro trabajo que se descubra.

Answer 7

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no">

Solo quita la interfaz de usuario mínima, que se deshizo de mí.

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