webentwicklung-frage-antwort-db.com.de

CSS3-Eigenschaft Webkit-Überlauf-Scrollen: Berühren Sie ERROR

iOS 5 veröffentlicht Webdesignern eine neue Eigenschaft -webkit-overflow-scrolling:touch, die den Hardwarebeschleuniger für iOS-Geräte verwendet, um nativen Bildlauf für ein scrollbares div bereitzustellen.

Bei der Implementierung auf unserer Website in der Entwicklung funktioniert es jedoch nicht gut. Ich glaube, es könnte ein CSS-Problem geben, daher frage ich hier.

Die folgende Geige zeigt Ihnen, dass es perfekt funktioniert 

Wenn Sie sich in der Entwicklung zu unserer Website bewegen, finden Sie dasselbe Bedienfeld unter der Registerkarte "Funktionen", aber unter iOS ist der Bildlauf zwar perfekt, der überlaufene Bereich wird jedoch nicht mit Bildern angezeigt, die literarisch in zwei Teile geschnitten sind.

http://www.golfbrowser.com/courses/mill-ride/

Ich habe keine Ahnung, wie ich das beheben kann http://www.golfbrowser.com/photo.PNG

57
Robin Knight

Wie @ relluf darauf hinweist, wird der Fehler durch das Anwenden von 3D-Übergängen auf das relative Element behoben. Ich untersuchte es jedoch ein wenig weiter und es scheint, dass das Anwenden von -webkit-transform: translateZ(0px) auch funktioniert (dies ist das, was Google für gmaps map container tut) und es muss sich nicht auf dem relativ positionierten Element befinden, sondern nur dem direkten Nachkommen des scrollbaren Elements.

Wenn Sie also nicht manuell eine Liste aller Orte führen möchten, an denen der Fix benötigt wird, können Sie Folgendes tun:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}
85
spheroid

Was für ein Trottel haben sie hier losgelassen. Ich habe alle möglichen Problemumgehungen ausprobiert, bis ich endlich die einzige Eigenschaft gefunden habe, die für die korrekte Darstellung von Elementen in einem -webkit-overflow-scrolling:touch div erforderlich ist: position: static 

Relativ und absolut positionierte Elemente werden immer an der Grenze abgeschnitten und fehlen (außer leeren Raum) außerhalb. Wenn Sie die Positionseigenschaft dynamisch von statisch in absolut ändern, bleibt nur der sichtbare Teil des scrollbaren div-Ansichtsfensters gerendert, wo auch immer der Versatz liegt.

16
user1012566

Ich bin auch in diesen Fehler gestoßen. Ich habe es behoben, indem ich die folgenden CSS auf übergeordnete Elemente angewendet habe:

-webkit-transform: translate3d(0, 0, 0);

Ich habe jedoch festgestellt, dass dies das Rendern verlangsamt und möglicherweise andere Eingabeelemente als gewünscht auswählt, wenn ein berührtes Eingabeelement in die Mitte der Ansicht gerollt wird (von Safari/iOS).

7
relluf

Wenn in iOS ein Element innerhalb eines Elements mit -webkit-overflow-scrolling: touch set absolut (oder fixed) relativ zu einem Element außerhalb des Bildlaufcontainers positioniert ist, wird das Element nur einmal gerendert und das Rendering wird nicht aktualisiert, wenn das Element gescrollt wird. Beispiel-HTML:

<div class="relative-to-me">
  <div class="scrollable">
    <div class="absolutely-positioned">
    </div>
  </div>
</div>

Wenn Sie eine erneute Wiedergabe erzwingen, indem Sie eine CSS-Eigenschaft ändern (z. B. im Inspektor), können Sie feststellen, dass die Position des Elements an der richtigen Stelle erneut dargestellt wird. Ich vermute, dies ist das Ergebnis einiger Leistungsfunktionen zur Optimierung der Bildlaufleistung.

Die Lösung für dieses Problem besteht darin, will-change: transform für das absolut (oder fixierte) Element festzulegen.

.absolutely-positioned {
    will-change: transform;
}
2
joeyhoer

Ich habe diesen Fehler gründlich untersucht, ich habe auch ein jsfiddle erstellt und in einem Fehlerbericht an Apple übermittelt. Bitte sehen Sie: iOS5 Bilder verschwinden beim Scrollen mit Webkit-Überlauf-Scrollen: Berühren Sie Sobald Apple mir antwortet, werde ich es zu diesem Thema melden, damit Sie auf dem Laufenden bleiben können sehr ärgerlicher Fehler

2
lucaferrario

Ich hatte auch das Problem, dass Überlauf-Scrollen mit der Option "-webkit-overlfow-scrolling" zum Berühren zu neu erstellten Problemen mit positionierten Elementen führte. In meinem Fall hatte ich eine Liste, in der die einzelnen Elemente eine relative Positionierung hatten, sodass ich die Position der untergeordneten Elemente verwenden konnte. Wenn der Benutzer mit dem obigen CSS unter iOS 5 verborgenen Inhalt in Sichtweite gescrollt hat, gab es eine kurze Verzögerung, bevor er den Bildschirm neu zeichnete, um die Elemente zu überprüfen. Es war wirklich nervig. Zum Glück stelle ich fest, dass dies behoben wurde, wenn ich auch die relative Position des übergeordneten Knotens angegeben habe.

1
Robert

Ich habe verschiedene Lösungen ausprobiert, schien in meinem Fall nicht perfekt zu funktionieren. 

Endlich habe ich einen Weg gefunden, mit jQuery gut zu funktionieren: 

Wenden Sie die Eigenschaft -webkit-overflow-scrolling jedes Mal an, wenn Sie aufrüsten.

* Zuerst wendete ich auch -webkit-overflow-scrolling an: auto when TouchDown , um iOS-Rendering zu deaktivieren. Aber die Seite blinzelte. Also habe ich es weggelegt und funktioniert dann überraschend gut!

Überprüfen Sie die Zeilen unten und hoffen Sie, dass es hilft:

<!-- ???? JQuery Functions-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

//???? Apply -webkit-overflow-scrolling in Every TouchEnd
$(document).on('click touchend', function(event) {
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"});
});

</script>



<!-- ???? html Elements & Style -->

<div id="TestDIV">
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
    <div class="Element"></div>
</div>

<style>
#TestDIV{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
}

#TestDIV .Element{
    width:300px;
    height:300px;

    margin: 2px;

    background-color: gray;

    display: inline-block;
}
#TestDIV .Element:nth-child(odd){
    background-color: whitesmoke;
}   
</style>
0
Corxit Sun

Der Fehler ist noch immer in iOS 6 vorhanden. Wenn Ihr Problem mit position: relative zusammenhängt, können Sie das Problem möglicherweise lösen, indem Sie z-index: 1 vorübergehend über JS einstellen. -webkit-transform: translate(...) hat in meinem Fall nicht mit position: relative gearbeitet.

0
Bernd