-webkit-overflow-scrolling: toque; se rompe en el iOS8 de Apple

inertia

Question

Estoy trabajando en una aplicación web que utiliza -webkit-overflow-scrolling:touch en varios lugares para dar a la inercia de los divs desbordados el desplazamiento.

Desde la actualización a IOS8, -webkit-overflow-scrolling: touch evita que puedas desplazarte en lo que sea, y la única forma en que he podido solucionar esto es mediante la eliminación de -webkit-overflow-scrolling: touch que deja el estándar pegajoso desplazamiento ¡Por favor ayuda!

Este es un ejemplo de una de las clases estándar que funciona en iOS5, 6 y 7:

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
} 

Answer 1

Evitar que los eventos táctiles de los elementos circundantes burbujeen el DOM es otra solución potencial, es posible que observe que el desplazamiento se detiene cuando los elementos DIV circundantes reciben los eventos táctiles o de arrastre. Tuvimos este problema en particular en un menú que necesitaba desplazarse sin problemas. Desactivar esos eventos ayudó a detener la "adherencia" del elemento de desplazamiento.

$html.bind(''touchmove'', scrollLock );

var scrollLock = function(e) {
        if( $body.hasClass(''menu-open'') ){
                e.stopPropagation();
                e.preventDefault();
        }
};

$html.unbind(''touchmove'', scrollLock );

Answer 2

He intentado todas las soluciones aquí sin éxito. Pude hacerlo funcionar teniendo la propiedad -webkit-overflow-scrolling: touch; en la división desplazable Y en el contenedor principal.

div.container {
    -webkit-overflow-scrolling: touch;
}

div.container > div.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

Answer 3

No pude resolver el problema con respuestas anteriores. Así que después de unas horas probé la biblioteca iScroll , iScroll . Sé que incluir una biblioteca adicional (y bastante importante) para agregar el desplazamiento solo para iOS no es muy bueno, pero esto es lo que me funcionó. Sólo tienes que seguir el archivo Léame, la versión Lite es suficiente.

Desventajas:

• El desplazamiento en Android ahora parece una mierda, ya no es nativo.
• No es posible actualizar la página desplazándose más
• Necesita aplicar otra solución para Android: los clics no funcionan

No estoy seguro de si lo usaré, pero si lo necesita, inténtelo.

Answer 4

También he tenido algunos problemas con esto, pero en un escenario ligeramente diferente.

Tengo mis divs con inercia sin problemas.

Tengo un JSFiddle simple donde puedes echar un vistazo.

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

Espero eso ayude.

Answer 5

Tuve el mismo problema en una aplicación web de Cordova. Para mí, el problema era que tenía un <div> padre que estaba animado y tenía la propiedad animation-fill-mode: forwards;

La eliminación de esta propiedad resolvió el problema y solucionó el desbordamiento de desplazamiento de desplazamiento.

Answer 6

Tuve este problema al utilizar el modo de arranque angular. Lo arreglé creando mi propia hoja de estilo y eliminando el ancho y el margen fijos en las consultas de medios.

ORIGINAL:

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

CAMBIOS:

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}

Answer 7

Tuve este problema y encontré una solución. La solución es que, tienes que poner tu contenido en dos contenedores por ej :(. DashboardScroll> .dashboardScroll-inner) y dar el contenedor interno ".dashboardScroll-inner" 1px más altura que el padre ".dashboardScroll" a través de este css3 propiedad

.dashboardScroll-inner { height: calc(100% + 1px);}

mira esto :

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

o de lo contrario, si no puedes agregar otro contenedor, usa esto:

.dashboardScroll:after { height: calc(100% + 1px);}

Answer 8

Tuve un problema similar con un div enrollable anidado (bastante complejo) que se desplazó bien en iOS 5, 6 y 7, pero que falló intermitentemente en iOS 8.1.

La solución que encontré fue eliminar todo el CSS que engaña al navegador para que use la GPU:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

Al hacer esto, el ''-webkit-overflow-scrolling: touch;'' Todavía se puede incluir y seguir funcionando como normal.

Significó sacrificar las ganancias (para mí, dudosas) del rendimiento de desplazamiento que los trucos anteriores dieron en las encarnaciones anteriores de iOS, pero en la elección entre eso y el desplazamiento de inercia, el desplazamiento de inercia se consideró más importante (y no apoyamos iOS 5 más).

No puedo decir en este momento por qué existe este conflicto; Puede ser que sea una mala implementación de estas características, pero sospecho que hay algo más profundo en el CSS que lo está causando. Actualmente estoy intentando crear una configuración HTML / CSS / JS reducida para demostrarlo, pero tal vez sea necesaria la estructura de marcado pesado y las grandes cantidades de datos dinámicos para que esto suceda.

Anexo: Sin embargo, tuve que señalar a nuestro cliente que si incluso con esta solución, el usuario comienza a intentar desplazarse en un elemento no desplazable, tendrá que esperar un segundo después de detenerse antes de poder desplazar el elemento desplazable. Este es el comportamiento nativo.

Answer 9

Usé el último método en la respuesta de Mohammed Suleiman (.dashboardScroll: after {height: calc (100% + 1px);}) pero el resultado fue que tenía un espacio vacío de 100% + 1px debajo de mi contenido. Arreglé esto cambiando la altura de nuevo a 1px después de 500 ms. Feo, pero funciona.

Esta era una aplicación react.js, así que mi código era así:

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

y renderizar

render() {
    var style = '''';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}