Bug con translate3d in Chrome v.44?

Question

Chrome 44 (44.0.2403.89 m) è appena stato rilasciato e ho problemi durante l'utilizzo di translate3d. (In entrambe le versioni Mac e Windows)

---

Questo sta influenzando plugin come fullPage.js e quindi thousands of pages in questo momento. ( Opened issue at fullpage.js github)

---

Mi sembra che quando l'applicazione di due diversi valori di tradurre allo stesso elemento consecutivamente dopo un breve periodo di tempo, si riavvia la posizione 0 quando applicare il nuovo valore, provocando la precedente transizione da perdere.

non ero in grado di isolare completamente e riprodurla pulita come mi sarebbe piaciuto, ma questo è quanto ho potuto fare:

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

di riprodurlo, basta scorrere verso il basso . Noterai come torna alla sezione precedente di ogni scroll se lo fai consecutivamente. E.g: vedrai la prima sezione rossa due volte.

Se si apre lo stesso test con qualsiasi altro browser, non si vedrà il problema.

Le transizioni in atto sono le seguenti nel mio caso (che dipendono dalle dimensioni viewport):

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

Ma tra il 1 ° e il 2 ° e il 3 ° e il 4 ° sembra di tornare indietro a translate3d(0,0,0); provocando la visualizzazione della prima sezione ancora e ancora come punto di partenza.

Answer 1

Funziona solo se si chiama in un animation frame

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

Indovina il problema è che l'animazione e il calcolo della posizione sta accadendo allo stesso tempo, che sta causando le cose per ottenere strane

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