У меня небольшая проблема с Safari - когда я хочу обновить позицию элемента DOM в событии прокрутки, Safari, кажется, не догоняет изменения (приводящие к эффекту скачкообразной задержки). Я проверил это в других браузерах (Chrome, FF, IE8 +), и это, кажется, характерно для Safari.

Я сделал jsfiddle, чтобы проиллюстрировать мою проблему:

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

Как видите, я добавил дополнительный цикл чтения DOM для каждой прокрутки, чтобы имитировать «больше операций» при каждом возникновении события, так как этот механизм является частью большого проекта, который содержит много других операций DOM. (Обратите внимание, что этот пример работает везде, кроме Safari).

Кроме того, я использовал jQuery только для удобства, в настоящем проекте используется чистый js.

Мне удалось частично решить проблему

изменяяleft = x собственность наtransform = translate3d(x,0,0)Таким образом, браузер будет использовать графический процессор.

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

Тем не менее, иногда я все еще испытываю небольшое отставание / сбои при прокрутке.

Но что важнее, это исправление не влияет на прокрутку, когда я использую прокрутку мыши или сенсорную панель! Хотя перетаскивание полосы прокрутки работает намного лучше, использование любого из вышеперечисленного возвращает меня к моей первоначальной проблеме.

Есть идеи, почему это происходит и как это исправить?

ТЛ; др; - Safari работает медленно при изменении положения элемента на прокрутке; translate3d, кажется, не работает должным образом при использовании мыши прокрутки / сенсорной панели.