javascript - navegador - safari windows 10
iOS Safari/Chrome: desplazamiento no deseado al enfocar una entrada dentro del modal (7)
Agregue este meta ( escala máxima = 1, escala mínima = 1 ) para restablecer el desplazamiento, que ocurrió al enfocar el campo de entrada.
Probado en Safari y Chrome: el mismo resultado, así que creo que es un problema de iOS.
Esto sucede solo si hay una entrada dentro del modal y yo toco esa entrada. En el mismo momento, la entrada se enfocó y el teclado nativo de iOS se hizo visible.
La página siguiente, modal en el mismo momento, se desplaza automáticamente al 50% de su altura. Este comportamiento es totalmente no deseado y no tengo ni idea de cómo evitar esta "característica" predeterminada de iOS.
Manifestación:
Así que resolví esto y lo probé en mi Iphone 5, no tengo Ipad para verificar. Tengo deshabilitar el overflow:hidden en mi solución, puede agregar, si desea deshabilitar el desplazamiento todo en uno para todos los modales. La solución es agregar básicamente las propiedades de altura y posición tanto al elemento html como al cuerpo.
html, body {
position:relative;
/*overflow:hidden;*/
height: 100%;
}
Entonces, solo cuando se centre en la entrada, se definirán la altura y la posición, ya he codificado esta solución desde su repositorio, le enviaré una solicitud de extracción. También he agregado browserSync en su configuración trilla. Por lo tanto, ahora será fácil de probar en cualquier dispositivo.
¡Aclamaciones!
EDITAR: de otra manera, si la solución anterior no funciona por alguna razón. entonces,
/*
* @summary touch handler; will remove touch ability
* @author yeomann
*/
function Touchyhandler(e) {
e.preventDefault();
}
y luego, pragmáticamente, agregue y elimine la escucha táctil como esta
//to add
document.addEventListener(''touchmove'', Touchyhandler, false);
//to remove
document.removeEventListener(''touchmove'', Touchyhandler);
La solución anterior a js probada en IOS 9.3.2 funciona como un encanto para mí]
No estoy 100% seguro pero puedo imaginar lo siguiente:
Cuando aparece el teclado, la altura de la ventana disminuye, pero el valor de scrollTop sigue siendo el mismo, por lo que el sitio salta a ese valor. Puede agregar un overflow:hidden al body cuando el modal está abierto. Esto bloqueará el desplazamiento "detrás" del modal y probablemente resolverá su problema.
Para evitar que la página se desplace, tanto en el eje x como en el eje y, usamos el overflow: hidden; atributo en css.
Así que si aplicamos esto al cuerpo,
body {
overflow: hidden !important;
}
Debería funcionar bien?
De hecho, esto en realidad no funciona, porque solo has deshabilitado xey para desplazarte por toda la página durante todo el tiempo.
Para evitar esto, podemos usar un poco un javascript para agregar una clase al cuerpo cuando el modal está activo.
Primero debemos agregar una identificación a nuestro cuerpo, <body id="body"> esto permite que javascript reconozca el cuerpo.
En segundo lugar, debemos agregar un id a nuestro modal, <div id="modal"> , también permitiendo que javascript reconozca el modal.
<script type="text/javascript">
function modalActive() {
if (document.getElementById("modal").classList.contains("active")) {
document.getElementById("body").classList.add("modal-active");
} else {
getElementById("modal").classList.remove("active"));
getElementById("body").classList.remove("modal-active"));
}
}
</script>
tanto para el botón que se inicia como para cerrar el modal, debemos agregar un evento onclick,
<button onclick="modalActive()">Click Me!</button>
Además de eso, debemos agregar esto al archivo css.
body {
overflow: initial !important;
}
body.modal-active {
overflow: hidden !important;
}
Y ahí vamos.
Probé varias cosas que funcionaron para las entradas modales de rebote en la página html. La solución más sencilla que funcionó para mí fue agregar los siguientes estilos a la etiqueta del cuerpo cuando el modal está abierto en la página.
position: fixed;
width: 100%;
Simplemente agregue una respuesta aquí en caso de que la gente se tropiece con esta pregunta (en lugar de su otra pregunta, que tiene una gran demostración para ilustrar este problema )
Estamos enfrentando un problema similar en el trabajo. Como mencionó, el desplazamiento siempre es ~ 50% de la altura de la página, lo que sucede independientemente de dónde se encuentre el desplazamiento inicial.
En el pasado, cuando observaba un "salto" similar con versiones anteriores de iOS (aunque mucho menos dramático), solía position: fixed esto aplicando position: fixed (o relative ) al body ( que permite el overflow: hidden a correctamente trabajar ).
Sin embargo, esto tiene la consecuencia desatendida de devolver al usuario a la parte superior de la página, si se han desplazado hacia abajo.
Por lo tanto, si está dispuesto a abordar este problema con algún JavaScript , aquí hay una solución / hack que he lanzado juntos:
// 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 un enlace de su página de demostración (de su otra pregunta), para ilustrar: https://jpattishall.github.io/sweetalert2/ios-bug.html
Y para aquellos que buscan una solución más general, podría 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'');
}
}
Edición: para evitar los "cambios / cambios" en los escritorios, sugeriría la detección de funciones / ua sniffing para aplicar esto solo a los safaris móviles.
También he experimentado este problema. Una breve explicación es que iOS Safari intentará desplazarse automáticamente a cualquier entrada enfocada y, en este caso particular, el elemento enfocado se encuentra dentro de un elemento de posición fija. Safari parece tener problemas para encontrar el elemento de posición fija cuando quiere centrar el elemento en la pantalla, por lo tanto, el desplazamiento del fondo.
Una posible solución es agregar un touchstart eventos de touchstart al campo de entrada y calcular la posición actual de la superposición, cambiar la posición a absoluta y actualizar la posición superior / izquierda para volver a colocar la superposición donde estaba en la pantalla cuando está en posición fija, y, finalmente, agregue un nuevo detector de blur para restablecer la superposición a una posición fija cuando deje el foco / desenfoque en la entrada. Esto debería evitar que la página se desplace. Sugiero usar touchstart porque debería touchstart antes del evento de focus , en cuyo caso la página ya comenzará a desplazarse. Safari debe poder encontrar y centrar la superposición de posición absoluta cuando se activa el evento de focus .