Probado en Safari y Chrome – el mismo resultado, por lo que creo que es iOS problema.

Esto sólo ocurre si hay una entrada en el interior de la modal y me toca esa entrada. En el mismo momento en que, de entrada tienes el foco y el teclado nativo de iOS se hacen visibles.

Página siguiente modal en el mismo momento en que se desplaza automáticamente al 50% de su altura. Este comportamiento es totalmente no deseados y no tengo ni idea de cómo prevenir este defecto de iOS «característica».

Demo:

iOS Safari/Chrome - no Deseados de desplazamiento cuando se enfoca una entrada dentro de la modal

Uso DOMListener para Chrome para obtener registro de DOM cambios. Tengo 59 cambios en la apertura de modal y la adición de 1 consulta de medios de comunicación de estilo. Compruebe también cambiar el tamaño de los controladores. Posiiotn fijo o desbordamiento oculto también puede ser el problema.
Gracias @Pinal por la respuesta! He intentado añadir dinámicamente overflow: hidden a cuerpo, pero no ayuda en este caso. Probablemente position: fixed es el problema. ¿Puede por favor explicar un poco más acerca de por qué puede ser el problema y cómo puedo solucionarlo.
Acabo de notar que position:fixed tiene algunos problemas en iOS CoreGraphics de procesamiento. En su caso le recomiendo que se cambie todos los position: fixed absoluta y prueba de nuevo. También puede buscar la solución en github (como ejemplo – github.com/scottjehl/Device-Bugs/…)
me di cuenta de que esta función close(i, expectedNumberOfNonCommentArgs) los impactos de esta cosa, cuando se trate de un comentario no hay bg de desplazamiento en Safari.

OriginalEl autor Limon Monte | 2016-05-17

7 Comentarios

  1. 10

    Sólo añadir aquí una respuesta en el caso de personas que se lanzaron a esta pregunta (en lugar de tu otra pregunta, la cual tiene una gran demostración para ilustrar este problema)

    Estamos frente a un problema similar en el trabajo. Como usted ha mencionado, el desplazamiento es siempre ~50% de la altura de la página, lo que ocurre independientemente del lugar en que el offset inicial.

    En el pasado, cuando me observó una similar «saltar» con anteriores versiones de iOS (aunque, mucho menos dramático salto), he trabajado en todo esto mediante la aplicación de position: fixed (o relative) a la body (que permite a overflow: hidden para trabajar correctamente).

    Sin embargo, esto ha desatendido consecuencia de saltar al usuario de vuelta a la parte superior de la página, si han desplazado hacia abajo.

    Así que, si estás abierto a abordar esta cuestión con algunos JavaScript, he aquí una revisión/hack me he tirado 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 lo que el CSS se ve como:

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

    Aquí una horquilla de su página de demostración (de tu otra pregunta), para ilustrar: https://jpattishall.github.io/sweetalert2/ios-bug.html

    Y para aquellos que están buscando para fijar un plano más general, se podría hacer algo como lo siguiente al de la apertura/cierre de 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: Para evitar el «cambio/unshifting» en los escritorios, me permito sugerir la característica de detección/ua oler a aplicar esto a sólo mobile safari.

    Sólo para tu información en IE, document.body.scrollTop siempre es 0 y la configuración de no desplazarse. Uso window.scroll(x,y) lugar y obtener scrollTop a través de window.pageYOffset en IE

    OriginalEl autor Jack

  2. 1

    Así que he resuelto este y probado en mi Iphone 5, no tiene el Ipad para comprobar.
    He deshabilitar overflow:hidden en mi solución, usted puede añadir, Si se desea deshabilitar desplácese todo en uno para todos los verbos modales.
    La solución es añadir básicamente, la altura y la posición de la propiedad a html y elemento de cuerpo.

    html, body {
       position:relative;
       /*overflow:hidden;*/
       height: 100%;
    }

    Así, que sólo cuando usted se centra en la entrada, la altura y la posición definida, ya he codificado de esta solución desde su repo, te voy a enviar una solicitud de extracción.
    También he añadido browserSync en su trago, el programa de instalación. Por lo tanto, Ahora será fácil probar a través de cualquier dispositivo.

    Saludos!

    EDIT: 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 más tarde pragmáticamente agregar y quitar toque oyente como este

    //to add
    document.addEventListener('touchmove', Touchyhandler, false); 
    //to remove   
    document.removeEventListener('touchmove', Touchyhandler);

    por encima de js solución probada en IOS 9.3.2 trabajo como un encanto para mí]

    OriginalEl autor Danish

  3. 1

    Para evitar que la página de desplazamiento, tanto en x, y el eje y, se utiliza el overflow: hidden; atributo de css.

    Así que si lo aplicamos al cuerpo,

    body {
        overflow: hidden !important;
    }

    Debería funcionar bien?

    De hecho, esta realidad no funciona, porque usted acaba de movilidad de x y de y desplazamiento para la totalidad de la página el durante todo el tiempo.

    Para eludir esto, podemos utilizar un poco de javascript para agregar una clase al cuerpo cuando el modal es activo.

    Primero debemos agregar un id de nuestro cuerpo, <body id="body"> esto permite javascript para reconocer el cuerpo.

    En segundo lugar, debemos agregar un id a nuestro modal, <div id="modal">, además de permitir javascript para reconocer 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 inicia y cierra el modal, debemos agregar un evento onclick,

    <button onclick="modalActive()">Click Me!</button>

    En la parte superior de la que debemos agregar a este archivo css.

    body {
        overflow: initial !important;
    }
    
    body.modal-active {
        overflow: hidden !important;
    }

    Y ahí vamos.

    OriginalEl autor harryparkdotio

  4. 0

    No estoy 100% seguro, pero me imagino el siguiente:

    Cuando aparezca el teclado, la altura de la ventana disminuye, pero la scrollTop valor sigue siendo el mismo, por lo que el sitio salta a ese valor. Se podría añadir overflow:hidden a la body cuando el modal es abierto. Esto bloqueará el desplazamiento «detrás» de la modal y probablemente a resolver su problema.

    Gracias por la respuesta @Kilian! Por desgracia, este truco no soluciona mi problema. Además de que, cuando agrego overflow: hidden a cuerpo, en el navegador de escritorio este efecto negativo aparece i.imgur.com/HDOxzmm.gif (cuerpo va a la izquierda-a la derecha en la barra de desplazamiento para mostrar/ocultar).
    Hmm, podría añadir la overflow a un #wrapper en lugar de la body para evitar ese problema. Y a continuación, agregue position:absolute a la modalidad en lugar de fixed. Has probado ya? Pero si se agrega position:absolute sin la overflow:hidden la página va a saltar a la parte superior cuando se abre el modal.

    OriginalEl autor Kilian So

  5. 0

    He experimentado este problema. Una breve explicación de que el iOS, Safari se trate de desplazamiento automático para cualquier entrada que se enfoca, y en este caso en particular el elemento seleccionado está dentro de un elemento con posición fija. Safari parece que luchar para encontrar la posición fija del elemento cuando se quiere centrar el elemento en la pantalla por lo tanto el fondo de desplazamiento.

    Una posible solución es agregar un touchstart detector de eventos para el campo de entrada y calcular la posición actual de la superposición, cambiar el posicionamiento absoluto y actualización de la parte superior izquierda de la posición para colocar la superposición de vuelta a su lugar estaba en la pantalla cuando se fija posicionado, y, finalmente, añadir un nuevo blur oyente para restablecer la superposición de vuelta a fijos de posicionamiento al salir de enfoque/desenfoque en la entrada. Esto debería evitar que la página de desplazamiento. Yo sugiero utilizar touchstart porque se debe activar antes de la focus evento en el que caso de que la página ya va a iniciar el desplazamiento. Safari debería ser capaz de encontrar y centro de la absoluta posicionado de superposición cuando el focus se desencadena el evento.

    OriginalEl autor DKrautkramer

  6. 0

    He intentado varias cosas que trabajaba para el rebote modal entradas en la página html. La solución más simple que trabajó para mí fue agregando los siguientes estilos para la cuerpo de la etiqueta cuando el modal es abrir en la página.

    position: fixed;
    width: 100%;

    OriginalEl autor Manohar Mankala

  7. 0

    Agregar esta meta (maximum-scale=1, el mínimo de la escala=1 ) para restablecer el desplazamiento, que se produjo cuando se enfoca el campo de entrada.

    OriginalEl autor Pranav K

Dejar respuesta

Please enter your comment!
Please enter your name here