[英]Bug with translate3d in Chrome v.44?
Chrome 44(44.0.2403.89米)刚刚发布,我在使用translate3d
时遇到了麻烦。 (在Mac和Windows版本中)
在我看来,当在一段短时间后连续将两个不同的转换值应用于同一个元素时,它会在我应用新值时将其位置重新开始为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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.