iOS7 Safari se rompe en el cambio de orientación si la input está enfocada

Parece que hay una ruptura fundamental en iOS7 iphone / ipad y posiblemente / probablemente en otras versiones.

Si se centra en un campo de input para que el keyboard esté abierto, el layout se rompe de manera terrible e irrecuperable en el cambio de orientación. No tiene nada que ver con css. Solo lo agregué para que el problema se vea más claro.

Cambiar la orientación vuelve a corregir el layout, pero no puedo encontrar otra forma.

Manifestación

Para cargar en un iPad / iPhone: http://dominictobias.com/ios-layout-bug/

Actualización: solo saltos con escala máxima = 1 en la window de meta que detiene el acercamiento de Safari cuando cambia de orientación.

Actualización 2: Aquí hay otro error divertido con meta viewport:

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

Si haces esto y cambias de orientación, se amplía y luego no puedes alejar y volver a ver todo el website, incluso la actualización no funciona. Tienes que crear una nueva pestaña para volver a un nivel de zoom normal.

Actualizado 3: En lugar de considerar esto como un error importante, el soporte de Apple me preguntó si estaba sucediendo en iOS 8 beta y marcó el error como No Rank.

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>iOS7 Layout break</title> <style> body { background-color: networking; margin: 0; padding: 0; } .container { background-color: black; } .inner-container { max-width: 75%; margin: 0 auto; padding: 30px; background-color: white; } </style> </head> <body> <div class="container"> <div class="inner-container"> <p>When you focus in on this field and change orientation, iOS7 (possibly other versions) will completely break by rendering some of the content off screen on the left and there seems to be no way to fix it by causing a repain - the node tree all the way up to the root thinks the width of the browser is now less than it was..</p> <input type="text"> </div> </div> </body> </html> 

Cuando primero se centra en:

Al principio cuando se centró en

Luego, todo el infierno se suelta, hasta el elemento <html> , el ancho es tan ancho como el bit rojo, una gran parte del sitio está desapareciendo en el espacio izquierdo (fuera de vista, sin barra de desplazamiento):

Todo el infierno se desata en el cambio de orientación.

Si vuelves a orientar la orientación y retrocedes nuevamente, el browser empieza a pensar que es un personaje principal en la película de inicio:

introduzca la descripción de la imagen aquí

Entonces … ¿soluciones? ¿Tendré que escuchar el cambio de orientación y centrarse programáticamente en la input antes de que se rompa? Editar: probó que no funcionó (no es lo suficientemente rápido).

Me encontré con este problema, pero se me ocurrió una solución plausible.

  • Cree una reference al campo de input dentro del scope global de sus aplicaciones (asegúrese de que puede acceder más tarde) al enfocarlo. Puse el valor pnetworkingeterminado en NULL.

  • En su controller de cambio de orientación, compruebe si la reference no es NULL, si NO, ejecute window.scroll (0,0). ejecute otra function en un time de espera para desplazarse a ese campo de input; window.scroll (0, activeInput.offset (). top);

Nota: He configurado el time de espera a aproximadamente 1000, lo que es suficiente para que el browser "vuelva a pintar". ¡No soy fanático de esto, pero funciona!

Ejemplo de código:

 var activeInput = null; $(":input").focusin(function (e) { activeInput = $(this); }); $(window).orientationChange(function(){ if(activeInput!=null)window.scroll(0,0); setTimeout(function(){window.scroll(0,activeInput.offset().top},100); }); 

Otra solución, si no te importa si el usuario pierde el keyboard, es:

 $(":input").blur(function (e) { window.scroll(0,0); }); $(":input").focusout(function (e) { window.scroll(0,0); }); activeInput.blur(); 

¡Espero que esto ayude!