DOM Element Position langsam beim Scrollen + Unterschied zwischen Scrollbar-Scrolling und Mouse / Touchpad-Scrolling

Question

Nov 20, 2014, 03:12 PM

javascript performance safari scroll webkit

DOM Element Position langsam beim Scrollen + Unterschied zwischen Scrollbar-Scrolling und Mouse / Touchpad-Scrolling

Ich habe ein kleines Problem mit Safari - Wenn ich die Position eines DOM-Elements beim Scrollen aktualisieren möchte, scheint Safari die Änderungen nicht nachzuholen (was zu einem sprunghaften Verzögerungseffekt führt). Ich habe es in anderen Browsern (Chrome, FF, IE8 +) überprüft und dies scheint spezifisch für Safari zu sein.

Ich habe eine Jsfiddle erstellt, um mein Problem zu veranschaulichen:

$("#container").on("scroll", function() {
    $("#slide").css({
        left: $("#container").scrollLeft() + "px"
    });

    var leftPos = 0;
    for(var i = 0; i < 2000 ; i++) {
        leftPos = $("#slide").css("left");
    }  
    $("#info").text(leftPos); 
});

http: //jsfiddle.net/a4b86et3/2

Wie Sie sehen, habe ich eine zusätzliche DOM-Leseschleife für jede Schriftrolle hinzugefügt, um zu simulieren, dass bei jedem Ereignis mehr Operationen ausgeführt werden, da dieser Mechanismus Teil eines größeren Projekts ist, das viele andere DOM-Operationen enthält. (Beachten Sie, dass dieses Beispiel mit Ausnahme von Safari überall reibungslos funktioniert.)

Auch ich habe jQuery nur aus praktischen Gründen verwendet, das eigentliche Projekt verwendet reine js.

Ich habe das Problem teilweise behoben

durch Ändern desleft = x Eigenschaft zutransform = translate3d(x,0,0), also würde der Browser die GPU verwenden.

$("#container").on("scroll", function() {
    $("#slide").css({
        '-webkit-transform': 'translate3d(' + $("#container").scrollLeft() + 'px, 0, 0)'
    });

    var leftPos = 0;
    for(var i = 0; i < 1900 ; i++) {
        leftPos = $("#slide").css("left");
    }  
    $("#info").text(leftPos);

});

http: //jsfiddle.net/a4b86et3/3

Manchmal habe ich jedoch immer noch eine leichte Verzögerung beim Scrollen.

Aber was ist wichtiger, dieses Update wirkt sich nicht auf das Scrollen aus, wenn ich einen Maus-Scroll oder ein Touchpad verwende! Während das Ziehen der Bildlaufleiste viel besser funktioniert, kann ich mit den oben genannten Methoden zu meinem ursprünglichen Problem zurückkehren.

Irgendwelche Ideen, warum dies passiert und wie es zu beheben ist?

tl; dr; - Safari ist langsam, wenn die Elementposition beim Scrollen geändert wird. translate3d scheint nicht richtig zu funktionieren, wenn Sie mit der Maus scrollen oder das Touchpad verwenden.

Zu kommentieren