-webkit-overflow-scrolling: berühren; bricht in Apples iOS8

Question

Ich arbeite an einer Web-App, die -webkit-overflow-scrolling:touch an mehreren Orten verwendet, um die überflogene divs Trägheit Scrollen geben.

Seit Aktualisierung auf IOS8, -webkit-overflow-scrolling: touch stoppt Sie in der Lage zu scrollen, was auch immer, und die einzige Möglichkeit, die ich bisher beheben konnte, ist durch Entfernen -webkit-overflow-scrolling: touch, die das Standard-Sticky-Scrollen verlässt. Bitte helfen Sie! Hier

ist ein Beispiel für eine der Standardklassen, die in iOS5 funktioniert, 6 und 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

Ich hatte ein ähnliches Problem mit einer (sehr komplex) scrollbaren div verschachtelt, die in iOS fein gescrollt 5, 6 und 7, aber das zeitweise Scrollen in iOS 8.1 fehlgeschlagen.

Die Lösung fand ich war in alle CSS, die Tricks um den Browser zu entfernen mit der GPU:

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

Dadurch dies die '-webkit-Überlauf-Scrolling: touch;' kann immer noch enthalten sein und trotzdem normal funktionieren.

Es bedeutet opfern die (für mich, fragwürdige) Gewinne Performance-Scrolling, die die oben genannten Hacks in früheren Inkarnationen von iOS gaben, aber in der Wahl zwischen diesem und Trägheit Scrollen Scrollen die Trägheit wurde als wichtiger (und wir iOS 5 wird nicht mehr unterstützt).

Ich kann zu diesem Zeitpunkt nicht sagen, warum dieser Konflikt existiert; Es kann sein, dass es eine schlechte Implementierung dieser Features ist, aber ich vermute, dass es etwas tiefer im CSS gibt, das es verursacht. Ich versuche derzeit, eine abgespeckte HTML/CSS/JS-Konfiguration zu erstellen, um dies zu demonstrieren, aber vielleicht ist die schwere Markup-Struktur und die großen Mengen dynamischer Daten notwendig, damit dies geschieht.

Nachtrag: Ich habe jedoch müssen unseren Kunden darauf hin, dass, wenn auch mit dieser den Benutzer beheben beginnt versuchen, auf einem nicht rollbaren Element blättern sie eine zweite nach dem Anhalten vor in der Lage, warten müssen wird um das scrollbare Element zu scrollen. Dies ist ein natives Verhalten.

Answer 2

Ich habe auch Probleme damit, aber in einem etwas anderen Szenario.

ich meine divs mit Trägheit ohne Probleme.

Ich habe eine einfache JSFiddle, wo Sie einen Blick haben.

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

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

Hoffe, es hilft.

Answer 3

Ich hatte das gleiche Problem in einer Cordova Web App. Für mich war das Problem, dass ich ein Elternteil hatte <div>, die animiert wurde und hatte die Eigenschaft animation-fill-mode: forwards;

Entfernen dieser Eigenschaft das Problem gelöst und fixiert das gebrochene Überlauf-Scrollen.

Answer 4

Ich hatte dieses Problem und eine Lösung gefunden. Die Lösung ist, dass Sie Ihren Inhalt in zwei Container für ex :(. DashboardScroll> .dashboardScroll-innere) und geben Sie den inneren Container ".DashboardScroll-innere" 1px mehr Höhe als der übergeordnete ".dashboardScroll“throug dieser css3 Eigenschaft

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

Check out this:

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

oder auf andere Weise, wenn Sie nicht einen anderen Behälter verwenden diese hinzufügen:

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

Answer 5

Ich war nicht in der Lage Um das Problem mit den vorherigen Antworten zu lösen, habe ich nach ein paar Stunden die iScroll-Bibliothek getestet: iScroll Ra-Bibliothek (und recht groß), um nur für iOS Scrollen hinzuzufügen, ist nicht toll, aber das ist, was für mich gearbeitet hat. Befolgen Sie einfach die Readme, die Lite-Version genügt.

Nachteile:

• auf Android Scrolling sieht jetzt aus wie Mist, es ist nicht mehr heimisch.
• Es ist nicht möglich, die Seite zu aktualisieren durch Scrollen mehr
• Sie brauchen eine andere Lösung für Android anwenden: Clicks not working

Ich bin nicht sicher, ob ich es benutzen werden, aber wenn Sie müssen es geben ein gehen.

Answer 6

Ich verwendete die letzte Methode in Mohammed Suleiman Antwort (.dashboardScroll: nach {Höhe: calc (100% + 1px);}), aber das Ergebnis war, dass ich einen 100% + 1px leeren Platz unter meinem Inhalt hatte. Ich habe das behoben, indem ich die Höhe nach 500ms wieder auf 1px änderte. Hässlich, aber es funktioniert.

Dies war ein react.js app so mein Code wie folgt war:

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

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

Answer 7

Ich hatte dieses Problem bei der Verwendung der Winkel Bootstrap-modal. Ich habe es behoben, indem ich ein eigenes Stylesheet erstellt und die feste Breite und den Rand in den Medienabfragen entfernt habe.

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

ÄNDERUNGEN:

.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 8

habe ich versucht, alle hier Lösungen ohne Erfolg. Ich konnte es schaffen, indem ich die Eigenschaft hatte -webkit-overflow-scrolling: touch; auf dem scrollbaren div AND auf dem übergeordneten Container.

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

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

Answer 9

Verhindern Touch-Ereignisse von umgebenden Elementen das DOM eine weitere mögliche Lösung ist, sprudeln, können Sie feststellen, dass nicht mehr steigt, wenn umgebenden DIV-Elemente die Berührung oder Drag Events zu erhalten. Wir hatten dieses spezielle Problem in einem Menü, das reibungslos durchlaufen werden musste. Das Ausschalten dieser Ereignisse half, das "Festkleben" des scrollfähigen Elements zu stoppen.

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

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

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