-webkit-overflow-scrolling: touchez; brise dans iOS8 d’Apple

Je travaille sur une application Web qui utilise -webkit-overflow-scrolling:touch plusieurs endroits pour donner le défilement d’inertie des divs survolé.

Depuis la mise à jour vers IOS8, -webkit-overflow-scrolling: touch empêche que vous puissiez faire défiler n’importe quoi, et la seule façon dont j’ai pu résoudre ce problème jusqu’à présent est de supprimer -webkit-overflow-scrolling: touch qui laisse le sticky standard défilement S’il vous plaît aider!

Voici un exemple d’une des classes standard fonctionnant sous iOS5, 6 et 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*/ } 

J’ai eu un problème similaire avec un div scrollable nested (assez complexe) qui défilait bien dans iOS 5, 6 et 7, mais qui n’a pas réussi à défiler par intermittence dans iOS 8.1.

La solution que j’ai trouvée consistait à supprimer tous les CSS qui empêchent le navigateur d’utiliser le GPU:

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

En faisant cela, le “-webkit-overflow-scrolling: touch;” peuvent toujours être inclus et fonctionnent toujours normalement.

Cela signifiait sacrifier les gains (pour moi, douteux) à la performance de défilement que les hacks ci-dessus ont donné dans les incarnations précédentes d’iOS, mais dans le choix entre ce défilement et l’inertie, le défilement à l’inertie était plus important iOS 5 plus).

Je ne peux pas à ce stade dire pourquoi ce conflit existe; il se peut que ce soit une mauvaise implémentation de ces fonctionnalités, mais je pense qu’il y a quelque chose d’un peu plus profond dans le CSS qui le cause. Je suis en train d’essayer de créer une configuration HTML / CSS / JS épurée pour le démontrer, mais peut-être que la structure de balisage lourd et les grandes quantités de données dynamics sont nécessaires pour que cela se produise.

Addendum: Cependant, je dois signaler à notre client que, même avec ce correctif, l’utilisateur essaiera de faire défiler un élément non défilable, mais il devra attendre une seconde après s’être arrêté avant de pouvoir faire défiler l’élément défilant. C’est un comportement natif.

J’ai eu ce problème et trouvé une solution. La solution est que vous devez placer votre contenu dans deux conteneurs pour ex :(. DashboardScroll> .dashboardScroll-inner) et donner au conteneur interne “.dashboardScroll-inner” 1px plus de hauteur que le parent “.dashboardScroll” via ce css3. propriété

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

Regarde ça :

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

ou sinon, si vous ne pouvez pas append 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

qui était animé et avait la propriété animation-fill-mode: forwards;

La suppression de cette propriété a permis de résoudre le problème et de corriger le défilement du dépassement de capacité rompu.

Je n’ai pas pu résoudre le problème avec les réponses précédentes. Après quelques heures, la bibliothèque iScroll a donc été testée , iScroll . Je sais qu’inclure une bibliothèque supplémentaire (et assez importante) pour append le défilement pour seulement iOS n’est pas génial mais c’est ce qui a fonctionné pour moi. Suivez simplement le readme, la version allégée suffit.

Désavantages:

  • Le défilement sur Android ressemble maintenant à de la merde, il n’est plus natif.
  • Il n’est pas possible de rafraîchir la page en faisant défiler plus
  • Vous devez appliquer un autre correctif pour Android: Les clics ne fonctionnent pas

Je ne sais pas si je vais l’utiliser, mais si vous en avez besoin, essayez.

J’ai essayé toutes les solutions sans succès. J’ai pu le faire fonctionner en ayant la propriété -webkit-overflow-scrolling: touch; sur le div défilant AND sur le conteneur parent.

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

J’ai eu des problèmes avec ça aussi, mais dans un scénario légèrement différent.

J’ai mes divisions avec l’inertie sans aucun problème.

J’ai un simple JSFiddle 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 cela aide.

J’ai eu ce problème en utilisant le modal de bootstrap angular. 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 multimé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; } } 

CHANGEMENTS:

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

Prévenir les événements tactiles des éléments environnants qui bouillonnent le DOM est une autre solution potentielle, vous remarquerez peut-être que le défilement s’arrête lorsque les éléments DIV environnants reçoivent les événements de toucher ou de glisser. Nous avons eu ce problème particulier dans un menu qui devait faire défiler en douceur. La désactivation de ces événements a permis d’arrêter le “blocage” de l’élément pouvant défiler.

 $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 Mohamed Suleiman (.dashboardScroll: after {height: calc (100% + 1px);}) mais le résultat était que j’avais un espace vide de 100% + 1px sous mon contenu. J’ai corrigé cela en changeant de hauteur à 1px après 500ms. Moche, mais ça marche.

C’était une application react.js donc mon code était le suivant:

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

et rendre:

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