Chrome v.44'te translate3d ile ilgili hata nedir?

Question

Krom 44 (44.0.2403.89 m) piyasaya sürüldü ve translate3d kullanırken sorun yaşıyorum.

---

(hem Mac ve Windows sürümleri) Bu anda fullPage.js gibi eklentileri ve dolayısıyla thousands of pages etkiliyor. ardışık kısa bir süre sonra aynı elemana iki farklı tercüme değerleri uygularken ( Opened issue at fullpage.js github)

---

O geliyor bana ben yeni bir değer uyguladığınızda, bir önceki neden 0 olarak konumunu yeniden başlatır kaçırmak için geçiş.

Ben tamamen izole etmek ve o kadar temiz ben isterdi olarak çoğaltmak mümkün değildi, ama bu kadarıyla yapabileceği gibidir:

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

sadece aşağı ilerleyin bunu yeniden oluşturmak için . Ardışık olarak yaparsanız, her bir kaydırmada önceki bölüme nasıl geçtiğini göreceksiniz. E.g: İlk kırmızı bölümü iki kez göreceksiniz.

Aynı sınamayı başka bir tarayıcıyla açarsanız, sorunu görmezsiniz. uygulanan

geçişler (onlar görünüm boyutuna bağlıdır) benim durumumda aşağıdaki olanları şunlardır:

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

Ama 1. ve 2., ve 3. ve geri dönmek gibi görünüyor 4 arasında translate3d(0,0,0);'a kadar ilk bölümün başlangıç ​​noktası olarak tekrar tekrar gösterilmesine neden olur.

Answer 1

kişiyi ne zaman mesele animasyon ve pozisyon hesaplaması garip olsun şeyleri neden olan, aynı anda gerçekleşiyor olmasıdır Sanırım bir animation frame

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

bunu ararsa çalışır

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