Błąd z translate3d w Chrome v.44?

Question

Chrome 44 (44.0.2403.89 m) właśnie został zwolniony i mam problemy z korzystaniem z translate3d. (W obu wersjach Windows i Mac)

---

ten dotyka wtyczki jak fullPage.js i dlatego thousands of pages w tej chwili. ( Opened issue at fullpage.js github)

---

Wydaje mi się, że przy zastosowaniu dwóch różnych przełożyć wartości na tym samym elemencie kolejno po krótkim okresie czasu, to wznawia swoją pozycję na 0, kiedy zastosować nową wartość, powodując poprzedni przejście do pominięcia.

I nie był w stanie odizolować go całkowicie i odtworzyć go tak czyste, jak bym chciał, ale to jest tak daleko, jak mogłem zrobić:

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

Aby odtworzyć, po prostu przewinąć w dół . Zauważysz, jak powraca do poprzedniej sekcji każdego przewijania, jeśli robisz to po kolei. Np .: pierwsza czerwona sekcja zostanie wyświetlona dwukrotnie.

Jeśli otworzysz ten sam test w innej przeglądarce, problem nie wystąpi.

Przejścia są stosowane są następujące w moim przypadku (zależą one od wielkości rzutni):

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

Ale pomiędzy 1. i 2., i 3. i 4. Wydaje się, aby wrócić do translate3d(0,0,0); powodując, że pierwszy punkt jest wyświetlany jako punkt początkowy.

Answer 1

To działa, jeśli tylko zwraca go w animation frame

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

Chyba chodzi o to, że animacja i obliczanie pozycji dzieje się w tym samym czasie, co jest przyczyną rzeczy uzyskać dziwne

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