javascript - link - La pantalla se acerca cuando se abre un modal Bootstrap en iOS 9 Safari

util js bootstrap download

Question

Cuando abro un modal Bootstrap 3 en iOS9 Safari, la pantalla se acerca. Está funcionando como se esperaba en la aplicación Chrome en iPhone. A continuación se muestran las imágenes que muestran el problema.

Captura de pantalla de Safari:

Captura de pantalla de Chrome (comportamiento esperado):

Answer 1

Basado en la respuesta de Sandeep Singh , pero ajustado para escuchar todo el modo de apertura / cierre, y para almacenar el contenido original.

Estoy usando el paquete web, pero solo jQuery ( $ ) con el método fixBootstrapModalZoomBug continuación es necesario.

// fix-quirks.js - referenced from my main application''s file
var $ = require(''jquery'');
$(fixQuirks);
function fixQuirks() {
fixBootstrapModalZoomBug();
}
function fixBootstrapModalZoomBug() {
// Fix Bootstrap Modal zoom bug
// https://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
if(/iPad|iPhone|iPod/.test(navigator.userAgent.toLowerCase())) {
var m = $(''meta[name=viewport]'');
var originalContent = m.attr(''content'');
$(''body'').delegate(''*'',''show.bs.modal'',function(ev){
m.attr(''content'', ''width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'');
}).delegate(''*'',''hidden.bs.modal'',function(ev){
m.attr(''content'', originalContent);
});
}
}

Answer 2

Como se señala en los comentarios de la respuesta aceptada, es mejor aplicar la corrección solo a la clase .modal-open.

body.modal-open{
padding-right: 0 !important;
overflow-y: auto;
}

Answer 3

De acuerdo con Wall of Browser Bugs de Bootstrap, este es un problema conocido en iOS 9 Safari.

Safari (iOS 9+)
A veces se aplica un zoom automático excesivo después de abrir un modal, y> el usuario no puede alejarse

WebKit bug # 150715

El título del error WebKit es:

Zoom excesivo aplicado cuando el cuerpo es corto y desbordamiento: oculto (nueva rotura iOS 9)

Basado en la parte del título cuando el cuerpo es corto , traté de establecer la altura mínima del cuerpo a la altura de la ventana gráfica, lo que funcionó para mi sitio aunque puede no ser una solución general:

body {
min-height: 100vh;
}

Answer 4

El siguiente código me arregló el problema (y algunas otras personas -> ver el enlace de GitHub):

body {
padding-right: 0px !important
}
.modal-open {
overflow-y: auto;
}

Fuente: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 5

No tengo idea de por qué está sucediendo esto. Los ejemplos modales en el sitio web bootstrap funcionan bien.

De todos modos, esto es lo que hice.

Cambié la metaetiqueta de la ventana gráfica para forzar al safari a no hacer zoom. Tampoco quería quitar el zoom del usuario, así que lo cambié de nuevo cuando el usuario descarta el modal.

Para forzar detener el zoom:

$(''#myModal'').on(''show.bs.modal'', function (e) {
document.querySelector(''meta[name="viewport"]'').content = ''width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'';
})

Para volver a establecerlo de manera predeterminada:

$(''#myModal'').on(''hidden.bs.modal'', function (e) {
document.querySelector(''meta[name="viewport"]'').content = ''viewport" content="width=device-width, initial-scale=1'';
})

Answer 6

Parece ser un error de ventana.

Discusión aquí: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Código que funcionó para mí desde ese hilo:

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.querySelector(''meta[name=viewport]'')
.setAttribute(
''content'',
''initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no''
);
}

Answer 7

También he sido golpeado por este problema y he rastreado lo que creo que es el problema.

El problema (al menos para mí) parece ser cuando el contenido de la página no llena verticalmente la página, lo que hace que iOS 9 Safari amplíe cuando se muestra el modal. Esto explicaría por qué el ejemplo de Bootstrap funciona como se esperaba: la página tiene mucho contenido (verticalmente).

Supongo que necesita algo de magia CSS (una altura: 100% en algún lugar?). Si alguien es un genio con CSS especialmente Bootstrap, cualquier ayuda sería apreciada, mientras tanto seguiré tratando de encontrar una solución y publicarla aquí con una actualización.

Actualización: Implementé CSS Sticky Footer y esto ha solucionado el problema; no es exactamente la solución que quería, pero sigue funcionando. Como referencia, utilicé la implementación de pie de página adhesivo de Ryan Fait ( http://ryanfait.com/sticky-footer/ ), pero creo que cualquier pie de página adhesivo funcionaría.