Ich habe eine Web-App, die mit Bokeh erstellt und auf Heroku . Ich habe kürzlich einen mobilen Stil für die App erstellt, der hier zu sehen ist:
Allerdings funktioniert das Ein-Finger-Touch-Scrollen nicht auf einem iOS-Mobilgerät. Als Hack-Problemumgehung habe ich width: 95% im .invcontent-wrapper -Tag meiner HTML-Datei ( index.html ) gesetzt. Dadurch wird ein vertikaler Streifen des Hintergrunds auf der rechten Seite freigelegt, auf dem das Berührungsscrolling funktioniert, das wie eine herkömmliche Bildlaufleiste wirkt. Ich fügte auch Pfeil nach oben und unten zum vertikalen Streifen hinzu, um Benutzer anzuweisen, es als Bildlaufleiste zu verwenden.
Wie kann ich das Touch-Scrollen für den gesamten Bildschirm aktivieren? Das Problem besteht möglicherweise darin, dass das zurückgegebene Bokeh-Dokument keine Touch-Scroll-Interaktion zulässt ...?
Ich verwende das Verzeichnisformat in Bokeh (unter Verwendung der Bokeh Server), wo meine index.html Jinja Vorlagendatei die folgenden relevanten Abschnitte enthält:
css:
%Vor%html:
%Vor% Das id="tbc-id" bezieht sich auf das JavaScript-Lade-Spinner, das ich verwende ( var target = document.getElementById('tbc-id'); ).
Obwohl es sich um ein sekundäres Problem handelt, kann ich auch nicht mit der Zwei-Finger-Zoom-Geste bei iOS zoomen.
Der Fehler stammt sicherlich von der Eigenschaft -webkit-overflow-scrolling: touch; . Sie sind nicht der Einzige, der Probleme damit hat:
Seit der Aktualisierung auf IOS8 verhindert
-webkit-overflow-scrolling: touch, dass Sie blättern können, und das einzige, was ich bis jetzt beheben konnte, ist das Entfernen von-webkit-overflow-scrolling: touch
Jedoch in Safari CSS-Referenz , Apple scheint zu sagen, dass es auf iOS 5.0 und später :
unterstützt wirdVerfügbarkeit:
Verfügbar in iOS 5.0 und höher.Unterstützungsstufe:
In Entwicklung
Aber können wir in der MDN-Referenz sehen:
Nicht standardmäßige
Diese Funktion ist nicht standardisiert und befindet sich nicht auf einer Standardspur. Verwenden Sie es nicht auf Websites, die mit dem Internet verbunden sind: Es funktioniert nicht für jeden Benutzer. Möglicherweise gibt es auch große Inkompatibilitäten zwischen Implementierungen und kann sich das Verhalten in der Zukunft ändern .
Dies ist kein Codierungsproblem, es kommt von diesem nicht standardmäßigen CSS-Stil. Versuchen Sie es zu entfernen und sehen Sie sich unten an, wie Sie das Scrollen verbessern können.
Habe ich geholfen?
Hier sind einige andere Referenzen:
-webkit-overflow-scrolling: touch; bricht in Apples iOS8 - SO
%Vor%Die Lösung, die ich gefunden habe, war, alle CSS zu entfernen, die den Browser mit der GPU tricksen: