Chrome v.44 中 translate3d 的错误？

Question

Chrome 44 (44.0.2403.89 m) 刚刚发布，我在使用 translate3d 时遇到了问题。 （在 Mac 和 Windows 版本中）

---

这正在影响像 fullPage.js 这样的插件，因此目前是 thousands of pages。 (Opened issue at 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);，导致第一部分一次又一次地显示为起点。

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