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/

要重现它,只需向下滚动。如果连续进行操作,您会注意到它如何返回到每个滚动条的上一部分。
例如:您会两次看到第一个红色部分。

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

在我的情况下,要应用的过渡是以下过渡(它们取决于视口(viewport)大小):

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

但是在第一和第二之间,以及第三和第四之间,它似乎又回到了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;
});

09-25 20:03
查看更多