Ошибка с translate3d в Chrome v.44?

Chrome 44 (44.0.2403.89 м) только что выпущен, и у меня возникают проблемы при использовании translate3d. (в версиях Mac и Windows)

Это влияет на плагины, такие как fullPage.js и, следовательно, тысячи страниц на данный момент. (Открытая проблема на fullpage.js github)

Мне кажется, что, применяя два разных значения перевода к одному и тому же элементу последовательно после короткого периода времени, он перезапускает свою позицию до 0, когда я применяю новое значение, в результате чего предыдущий переход будет пропущен.

Мне не удалось полностью изолировать его и воспроизвести как чистую, как хотелось бы, но это насколько я могу сделать:

http://jsfiddle.net/9ksx000q/3/

Чтобы воспроизвести его, просто прокрутите вниз. Вы заметите, как это происходит в предыдущем разделе каждого прокрутки, если вы делаете это последовательно. Например: вы увидите первый красный раздел дважды.

Если вы откроете тот же тест с любым другим браузером, вы не увидите проблемы.

Применяемые переходы в моем случае следующие (они зависят от размера видового экрана):

translate3d(0px, -641px, 0px);
translate3d(0px, -1282px, 0px);
translate3d(0px, -1923px, 0px);

Но между 1-м и 2-м и 3-м и 4-м они возвращаются к translate3d(0,0,0);, в результате чего первая часть будет отображаться снова и снова в качестве начальной точки.

Ответы

Ответ 1

Он работает, если вы просто назовете его в animation frame

http://jsfiddle.net/9ksx000q/4/

Угадайте, что проблема заключается в том, что анимация и вычисление позиции происходят одновременно, что приводит к тому, что вещи становятся странными.

requestAnimationFrame(function () {
    var dtop = element.position().top;

    element.addClass('active').siblings().removeClass('active');

    canScroll = false;

    var translate3d = 'translate3d(0px, -' + Math.ceil(dtop) + 'px, 0px)';
    $('#container').css(getTransforms(translate3d));

    //after animations finishes we allow to scroll again
    setTimeout(function () {
        canScroll = true;
    }, 1000);    
    //1000s is the time set to the in the CSS for the container
    //transition: all 1000ms ease-in-out;
});