Chrome v.44中的translate3d错误

Bug with translate3d in Chrome v.44?

本文关键字：translate3d 错误 中的 Chrome      更新时间：2023-09-26

Chrome 44 (44.0.2403.89 m)刚刚发布，我在使用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);，导致第一部分一次又一次地作为起点显示

如果你在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;
});
相关文章：