在Chrome v.44中使用translate3d时出现错误？ [英] Bug with translate3d in Chrome v.44?

问题描述

Chrome 44（44.0.2403.89 m）刚刚发布，使用 translate3d 时遇到问题。 （在Mac和Windows版本中）

---

这会影响插件，例如 fullPage.js ，因此目前数千页。
（在fullpage.js github 上打开的问题）

---

在我看来，当在短时间内连续使用两个不同的翻译值到同一个元素时，它会将它的位置重新设置为0，当我应用新值，导致先前的转换被错过。

我无法将其彻底隔离，并将其重现为我想要的那样干净，但这是我所能做到的：

http://jsfiddle.net/9ksx000q/3/

要重现它，只需向下滚动。你会注意到，如果你连续做的话，它会如何返回到每个滚动的上一部分。
E.g：你会看到第一个红色部分两次。

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

应用的转换在我的例子中是以下的（它们取决于视口大小）：

  translate3d（0px，-641px，0px）; 
 translate3d（0px，-1282px，0px）; 
 translate3d（0px，-1923px，0px）; 
  

但是在第一和第二之间，第三和第四，似乎回到 translate3d（0,0,0）; 使第一个部分再次显示为起点。

解决方案

如果你只是在动画框架中调用它，它会工作

< http://jsfiddle.net/9ksx000q/4/

猜测问题是动画和位置计算是在同一时间发生，这导致事情变得奇怪。

  requestAnimationFrame（function（）{
 var dtop = element.position（）。top; 
 
 element.addClass（'active'）。siblings（）。removeClass '）; 
 
 canScroll = false; 
 
 var translate3d ='translate3d（0px， - '+ Math.ceil（dtop）+'px，0px）'; 
 $（'＃container'）。css（getTransforms（translate3d））; 
 
 //动画结束后，我们允许再次滚动
 setTimeout（function（）{
 canScroll = true; 
}，1000）; 
 // 1000s是设置为容器中的CSS的时间
 // transition：all 1000ms ease-in-out; 
}）; 
  

Chrome 44 (44.0.2403.89 m) has just being released and I'm having troubles when using translate3d. (in both Mac and Windows versions)

---

This is affecting plugins like fullPage.js and therefore thousands of pages at the moment. (Opened issue at fullpage.js github)

---

It seems to me that when applying two different translate values to the same element consecutively after a short period of time, it restarts its position to 0 when I apply the new value, causing the previous transition to get missed.

I was not able to isolate it completely and reproduce it as clean as I would have liked to, but this is as far as I could do:

http://jsfiddle.net/9ksx000q/3/

To reproduce it, just scroll down. You'll notice how it goes back to the previous section on each scroll if you do it consecutively. E.g: you'll see the first red section twice.

If you open the same test with any other browser you won't see the problem.

The transitions being applied are the following ones in my case (they depend on the viewport size):

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

But between the 1st and the 2nd, and the 3rd and the 4th it seems to go back to translate3d(0,0,0); causing the first section to be shown again and again as the starting point.

解决方案

It works if you just calls it in a animation frame

http://jsfiddle.net/9ksx000q/4/

Guess the issue is that the animation and the position calculation is happening at the same time, which is causing things to get weird

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时出现错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！