Solución:
¡Creé la siguiente solución, que funciona en iOS 12!
Aunque la demostración incorporada a continuación usa Bootstrap 4, la misma solución funciona igualmente bien con Bootstrap 3 ya que ninguna de las clases modales o nombres de eventos son diferentes.
Paso 1: utilice un posicionamiento fijo para congelar el body en su lugar cuando el modal está abierto
Cuando se abre un modal de Bootstrap, una clase llamada .modal-open se agrega a la body. Agregue los siguientes estilos adicionales a esta clase:
body {
&.modal-open {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
}
Ahora, cada vez que se abre un modal, el body se fijará en su lugar y tendrá las mismas dimensiones que la propia ventana gráfica. ¡Esto evita completamente el desplazamiento porque no hay ningún lugar ni nada hacia dónde desplazarse!
Pero: esto también significa que abrir un modal hará que la página salte a la parte superior, porque el body ya no se extiende más allá del borde inferior de la ventana gráfica (asumiendo que el contenido de la página es más alto).
Paso 2: simule la distancia de desplazamiento anterior mientras el modal está abierto
Bootstrap expone eventos que se activan cuando se abre o se cierra un modal. Podemos utilizarlos para resolver el problema de “saltar a la cima” tirando de la parte superior de la body hasta cuando se abre un modal, de modo que parece que la posición de desplazamiento no ha cambiado:
$(function() {
var $window = $(window),
$body = $("body"),
$modal = $(".modal"),
scrollDistance = 0;
$modal.on("show.bs.modal", function() {
// Get the scroll distance at the time the modal was opened
scrollDistance = $window.scrollTop();
// Pull the top of the body up by that amount
$body.css("top", scrollDistance * -1);
});
});
Sin embargo, la página seguirá saltando a la parte superior cuando se cierre el modal porque el scrollTop valor de la window es todavía 0.
Paso 3: reinicia todo cuando el modal está cerrado
Ahora solo necesitamos conectarnos al evento que se dispara cuando el modal está cerrado y volver a poner todo como estaba:
- Elimine el posicionamiento fijo y el valor superior negativo en el
body - Establecer la posición de desplazamiento de la ventana de nuevo a lo que era originalmente
$modal.on("hidden.bs.modal", function() {
// Remove the negative top value on the body
$body.css("top", "");
// Set the window's scroll position back to what it was before the modal was opened
$window.scrollTop(scrollDistance);
});
No es necesario quitar manualmente la posición fija en el body, porque esto se establece a través del .modal-open class, que Bootstrap elimina cuando se cierra el modal.
Manifestación
¡Póngalo todo junto, y ahora puede evitar el desplazamiento en segundo plano en iOS mientras un modal está abierto sin perder su posición de desplazamiento!
Abra el siguiente enlace en un dispositivo iOS: https://daguy.github.io/ios-modal-fix/