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);
但是在第 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;
});
关于javascript - Chrome v.44 中的 translate3d 存在错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31575177/