Posição do elemento DOM lenta ao rolar + diferença entre a barra de rolagem e a rolagem do mouse / touchpad

Estou tendo um pequeno problema com o Safari - Quando eu quero atualizar a posição de um elemento DOM no evento de rolagem, o Safari parece não acompanhar as alterações (resultando em um efeito de atraso). Eu verifiquei em outros navegadores (Chrome, FF, IE8 +) e isso parece ser específico para o Safari.

Eu fiz um jsfiddle para ilustrar meu problema:

$("#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/

Como você pode ver, adicionei um loop adicional de leitura do DOM em cada rolagem para simular "mais operações em andamento" em cada ocorrência de evento, pois esse mecanismo faz parte de um projeto maior, que contém muitas outras operações do DOM. (Observe que este exemplo funciona sem problemas em qualquer lugar, exceto no Safari)

Além disso, eu usei o jQuery apenas por conveniência, o projeto real usa js puros.

Consegui corrigir parcialmente o problema

alterando oleft = x propriedade paratransform = translate3d(x,0,0), para que o navegador usasse a GPU.

$("#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/

No entanto, às vezes ainda estou experimentando um pequeno atraso / falha durante a rolagem.

Mas o que é mais importante, essa correção não afeta a rolagem quando estou usando um mouse ou touchpad! Enquanto arrastar a barra de rolagem funciona muito melhor, o uso de qualquer uma das opções acima me traz de volta ao meu problema inicial.

Alguma idéia de por que isso acontece e como corrigi-lo?

tl; dr; - O Safari é lento ao alterar a posição do elemento na rolagem; O translate3d parece não funcionar corretamente ao usar o mouse scroll / touchpad.

questionAnswers(1)

yourAnswerToTheQuestion