javascript – Chrome4.4中的translate3d错误?

Chrome 44(44.0.2403.89 m)刚刚被发布,我在使用translate3d时遇到麻烦. (Mac和Windows版本)

这正在影响像fullPage.jsthousands 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);导致第一部分被重复显示为起点.

如果您只是在动画框架中调用它,它将起作用

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;
});
翻译自:https://stackoverflow.com/questions/31575177/bug-with-translate3d-in-chrome-v-44

转载注明原文:javascript – Chrome4.4中的translate3d错误?