Question

Chrome 44（44.0.2403.89米）刚刚发布，使用translate3d时遇到了麻烦。（在Mac和Windows版本中）

<小时/> 这会影响fullPage.js等插件，因此会影响thousands of pages。（Opened issue at fullpage.js github）

在我看来，在短时间内连续将两个不同的转换值应用于同一个元素后，当我应用新值时，它会重新将其位置设置为0，从而导致错过上一个转换。

我无法完全隔离它并将其重现为我想要的干净，但这是我能做到的：

要重现它，只需向下滚动即可。你会注意到如果你连续这样做，它会如何回到每个卷轴的上一部分。例如：你会看到第一个红色部分两次。

如果您使用任何其他浏览器打开相同的测试，您将看不到问题。

在我的情况下应用的转换是以下几种（它们取决于视口大小）：

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

Chrome v.44中有translate3d的错误？

1 个答案: