iOS Chrome / Safari: desplazamiento no deseado al enfocar una entrada dentro del modal

Nos enfrentamos a un problema similar en el trabajo y me topé con esta pregunta con su (excelente) página de demostración.

Como mencionaste, el desplazamiento es siempre ~ 50% de la altura de la página, lo que ocurre independientemente de dónde esté tu desplazamiento inicial.

En el pasado, cuando observé un "salto" similar con versiones anteriores de iOS (aunque, un salto mucho menos dramático), por lo general he solucionado esto aplicando position: fixed(o relative) al body( esto permite overflow: hiddenque funcione correctamente ).

Sin embargo, esto tiene la consecuencia desatendida de hacer que el usuario vuelva a la parte superior de la página, si se ha desplazado hacia abajo.

Entonces, si está abierto a abordar este problema con alguien JavaScript, aquí hay una solución / truco que he preparado:

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

Y cómo se ve el CSS:

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

Aquí hay una bifurcación de su página de demostración, para ilustrar: https://jpattishall.github.io/sweetalert2/ios-bug.html

Y para aquellos que buscan una solución más general, puede hacer algo como lo siguiente al abrir / cerrar un modal:

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

Editar: una cosa a tener en cuenta es que no aplicamos la solución a todos los dispositivos / plataformas a ciegas, solo iOS Safari. Noté en su otra pregunta que no era fanático del desbordamiento: oculto debido al cambio de página cuando la barra de desplazamiento aparece / desaparece (con lo que estoy totalmente de acuerdo). Sugeriría simplemente aplicar el JS solo a dispositivos iOS.