webentwicklung-frage-antwort-db.com.de

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

Ich arbeite an einer Web-App, die -webkit-overflow-scrolling:touch an mehreren Stellen verwendet, um der überfliegenden divs-Trägheit ein Bildlauf zu geben.

Seit der Aktualisierung auf IOS8 können Sie mit -webkit-overflow-scrolling: touch nicht mehr scrollen. Die einzige Möglichkeit, das Problem zu beheben, besteht darin, -webkit-overflow-scrolling: touch zu entfernen. Bitte helfen

Hier ist ein Beispiel für eine der Standardklassen, die in iOS5, 6 und 7 funktioniert:

.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*/
} 
54
Jamie Beech

Ich hatte ein ähnliches Problem mit einem (ziemlich komplexen) verschachtelten, scrollbaren div, der in iOS 5, 6 und 7 problemlos gescrollt werden konnte, der aber in iOS 8.1 gelegentlich nicht scrollte.

Die Lösung, die ich gefunden habe, bestand darin, alle CSS, die den Browser mithilfe der GPU ausführen, zu entfernen:

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

Auf diese Weise wird der Befehl "-webkit-overflow-scrolling: touch;" kann immer noch enthalten sein und noch normal funktionieren.

Es bedeutete, die (für mich zweifelhaften) Gewinne für das Scrollen zu opfern, die die obigen Hacks in früheren Inkarnationen von iOS erbracht haben, aber bei der Wahl zwischen diesem und dem Trägheits-Scrollen wurde das Scrollen mit der Trägheit als wichtiger erachtet (und wir unterstützen dies nicht) iOS 5 nicht mehr).

Ich kann zu diesem Zeitpunkt nicht sagen, warum dieser Konflikt besteht; Es kann sein, dass es eine schlechte Implementierung dieser Features ist, aber ich vermute, dass etwas tiefer in CSS ist, was es verursacht. Ich versuche gerade, eine reduzierte HTML/CSS/JS-Konfiguration zu erstellen, um sie zu demonstrieren. Möglicherweise ist jedoch die starke Markup-Struktur und die großen Mengen an dynamischen Daten erforderlich.

Nachtrag: Ich musste jedoch unseren Kunden darauf hinweisen, dass der Benutzer selbst mit diesem Fix versucht, auf einem nicht scrollbaren Element einen Bildlauf durchzuführen, nachdem er angehalten wurde, bevor er einen Bildlauf durchführen kann das scrollbare Element. Dies ist natives Verhalten.

27
Louis Féat

Ich hatte dieses Problem und fand eine Lösung. Die Lösung ist, dass Sie Ihren Inhalt für zwei in zwei Container packen müssen :(. DashboardScroll> .dashboardScroll-inner) und dem inneren Container ".dashboardScroll-inner" 1px mehr Höhe als das übergeordnete ".dashboardScroll" durch dieses CSS geben Eigentum 

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

schau dir das an :

http://patrickmuff.ch/blog/2014/10/01/wie- wir-fixiert-der-webkit-overflow-scrolling-touch-bug-on-ios/

oder wenn Sie keinen anderen Container hinzufügen können, verwenden Sie Folgendes:

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

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

Durch das Entfernen dieser Eigenschaft wurde das Problem behoben und das Durchlaufen des Überlaufs behoben.

6
clauderic

Ich habe alle Lösungen hier ohne Erfolg ausprobiert. Ich konnte es mit der Eigenschaft -webkit-overflow-scrolling funktionieren lassen: touch; auf dem scrollbaren div UND auf dem übergeordneten Container.

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

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

Das Verhindern, dass Berührungsereignisse durch umgebende Elemente in das DOM gesprudelt werden, ist eine andere mögliche Lösung. Möglicherweise stellen Sie fest, dass das Scrollen stoppt, wenn umgebende DIV-Elemente Berührungs- oder Ziehereignisse empfangen. Wir hatten dieses spezielle Problem in einem Menü, das reibungslos durchlaufen werden musste. Das Deaktivieren dieser Ereignisse half, das "verkleben" des scrollbaren Elements zu stoppen. 

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

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

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

Ich konnte das Problem mit vorherigen Antworten nicht lösen. Nach ein paar Stunden gab die iScroll-Bibliothek einen Versuch, iScroll . Ich weiß, dass das Hinzufügen einer zusätzlichen Bibliothek (und ziemlich ansehnlich), um das Scrollen für nur iOS hinzuzufügen, nicht großartig ist, aber dies hat bei mir funktioniert. Folgen Sie einfach der Readme-Datei, die Lite-Version genügt.

Nachteile:

  • Das Blättern auf Android sieht jetzt wie Mist aus, es ist nicht mehr nativ.
  • Es ist nicht mehr möglich, die Seite durch Scrollen zu aktualisieren
  • Sie müssen ein weiteres Update für Android installieren: Klicks funktionieren nicht

Ich bin nicht sicher, ob ich es verwenden werde, aber wenn Sie in Not sind, versuchen Sie es.

1
CapK

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

Ich habe meine Divs mit Trägheit ohne Probleme.

Ich habe ein einfaches JSFiddle, in dem Sie nachsehen können.

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

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

Ich hoffe es hilft.

0
SergioM

Ich habe die letzte Methode in Mohammed Suleimans Antwort verwendet (.dashboardScroll: after {height: calc (100% + 1px);}), aber das Ergebnis war, dass ich einen 100% + 1px-Leerraum unter meinem Inhalt hatte. Dies wurde behoben, indem die Höhe nach 500 ms wieder auf 1px geändert wurde. Hässlich, aber es funktioniert.

Dies war eine react.js App, also sah mein Code so aus:

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

und rendern:

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

Dieses Problem hatte ich bei der Verwendung des Winkel-Bootstrap-Modals. Ich habe das Problem behoben, indem ich ein eigenes Stylesheet erstellt und die feste Breite und den festen 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%;
    }  
}
0
Nikki Lehman