Bug with translate3d in Chrome v.44?

Question

Chrome 44 (44.0.2403.89 m) has just being released and I'm having troubles when using translate3d. (in both Mac and Windows versions)

---

This is affecting plugins like fullPage.js and therefore thousands of pages at the moment. (Opened issue at fullpage.js github)

---

It seems to me that when applying two different translate values to the same element consecutively after a short period of time, it restarts its position to 0 when I apply the new value, causing the previous transition to get missed.

I was not able to isolate it completely and reproduce it as clean as I would have liked to, but this is as far as I could do:

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

To reproduce it, just scroll down. You'll notice how it goes back to the previous section on each scroll if you do it consecutively. E.g: you'll see the first red section twice.

If you open the same test with any other browser you won't see the problem.

The transitions being applied are the following ones in my case (they depend on the viewport size):

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

But between the 1st and the 2nd, and the 3rd and the 4th it seems to go back to translate3d(0,0,0); causing the first section to be shown again and again as the starting point.

Answer 1

It works if you just calls it in a animation frame

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

Guess the issue is that the animation and the position calculation is happening at the same time, which is causing things to get weird

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;
});