-webkit-débordement-défilement: toucher, faire des pauses dans iOS8 d'Apple

j'ai eu un problème similaire avec une div imbriquée (assez complexe) qui s'est déroulée fine dans iOS 5, 6 et 7, mais qui n'a pas réussi par intermittence à défiler dans iOS 8.1.

la solution que j'ai trouvée était de supprimer tous les CSS qui poussent le navigateur à utiliser le GPU:

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

ainsi, le '-webkit-overflow-scrolling: touch;' peut encore être inclus et fonctionner normalement.

cela signifiait sacrifier le (pour moi, douteux) gagne à la performance de défilement que les hacks ci-dessus ont donné dans les incarnations plus tôt de iOS, mais dans le choix entre cela et le défilement d'inertie, le défilement d'inertie a été jugé plus important (et nous ne supportons plus iOS 5).

Je ne peux pas à ce stade dire pourquoi ce conflit existe; il se peut qu'il s'agisse d'une mauvaise mise en œuvre de ces caractéristiques, mais je soupçonne qu'il y a quelque chose d'un peu plus profond dans la CSS qui en est la cause. Je suis en train d'essayer de créer un j'ai comparé la configuration HTML/CSS/JS pour la démontrer, mais peut-être que la structure lourde de balisage et les grandes quantités de données dynamiques sont nécessaires pour que cela se produise.

Addendum: j'ai cependant fait remarquer à notre client que si, même avec ce correctif, l'utilisateur commence à essayer de faire défiler un élément non scrollable, il devra attendre une seconde après s'être arrêté avant de pouvoir faire défiler l'élément scrollable. C'est un comportement autochtone.

j'ai eu ce problème et trouvé une solution. La solution est que, vous devez mettre votre contenu dans deux conteneurs pour ex: (.dashboardScroll > .dashboardScroll-inner) et donner le conteneur intérieur ".dashboardScroll-intérieur" 1px plus de hauteur que le parent ".dashboardScroll" à travers cette propriété CSS3

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

découvrez ce :

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

ou autrement si vous ne pouvez pas ajouter un autre conteneur, utilisez ceci:

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

j'ai eu le même problème dans une application web Cordova. Pour moi, le problème était que j'avais un parent <div> qui était animé et avait la propriété animation-fill-mode: forwards;

L'enlèvement de cette propriété a résolu le problème et a corrigé le débordement cassé-défilement.

Je n'ai pas pu résoudre le problème avec les réponses précédentes. Donc après quelques heures a donné à la bibliothèque iScroll un essai, iScroll . Je sais que l'inclusion d'une bibliothèque supplémentaire (et assez grand) pour ajouter le défilement pour juste iOS n'est pas grand, mais c'est ce qui a fonctionné pour moi. Il suffit de suivre le readme, la version lite suffit.

inconvénients:

• défiler sur Android ressemble maintenant à de la merde, il n'est plus natif.
• Il n'est pas possible d'actualiser la page en faisant défiler plus
• vous devez appliquer une autre correction pour Android: clics ne fonctionne pas

Je ne sais pas si je vais l'utiliser, mais si vous êtes dans le besoin, donnez-lui une chance.

j'ai essayé toutes les solutions ici sans succès. J'ai pu le faire fonctionner en ayant la propriété -webkit-overflow-scrolling: touch; sur la div scrollable et sur le conteneur parent.

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

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

j'ai eu quelques problèmes avec elle aussi, mais dans un scénario légèrement différent.

j'ai mes divs avec inertie sans aucun problème.

j'ai un JSFiddle simple où vous pouvez jeter un oeil.

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

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

J'espère que ça aidera.

j'ai eu ce problème en utilisant le bootstrap modal angulaire. Je l'ai corrigé en créant ma propre feuille de style et en supprimant la largeur et la marge fixes dans les requêtes médias.

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;
    }
}

CHANGES:

.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%;
    }  
}

empêcher les éléments environnants de toucher le DOM est une autre solution potentielle, vous pouvez noter que le défilement s'arrête lorsque les éléments DIV environnants reçoivent les événements de toucher ou de glisser. Nous avions ce problème particulier dans un menu qui devait défiler en douceur. Désactiver ces événements a aidé à arrêter le" collage " de l'élément scrollable.

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

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

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

j'ai utilisé la dernière méthode dans la réponse de mohammed Suleiman (.dashboardScroll:après { height: calc(100% + 1px);}) mais le résultat a été que j'ai eu un 100% + 1px espace vide en dessous de mon contenu. J'ai corrigé cela en changeant la hauteur de nouveau à 1px après 500ms. Moche, mais ça marche.

c'était une réaction.js application de sorte que mon code était comme ça:

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

et render:

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>);
}