translateY/X, Firefox'ta kaydırma çubuklarına neden oluyor

Question

translateX veya translateY kullanırken, Firefox'ta sayfanın düzeninin etkileneceği görünüyor. CSS belirtimi, bu özelliklerin düzeni etkilememesi gerektiğini belirtmesine rağmen, kalıcı kaydırma çubukları oluşturulur.

Örneğin, http://daneden.me/animate'a gidin ve 'fadeOutRightBig' animasyonunu tıklayın. Tüm tarayıcılarda (CSS animasyonlarını destekleyen) kaydırma çubukları oluşturulacak, ancak Firefox'ta devam edecektir. Bu Mozilla veya diğer tarayıcılar tarafından bir hataya mı düştü? Bilinen bir çözüm var mı?

Answer 1

Bana bir hata gibi gözüküyor: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 ama dikkat çekmemiş olması garip, benim için oldukça ciddi görünüyor.

html { 
    overflow-x: hidden; 
} 

Yoksa yatay kaydırma gerekiyorsa, üst öğe üzerinde uygulayın:

çözümü uzak olsun eğer, html elemanı üzerinde yatay taşma gizleme olurdu.

Answer 2

bu sorunu çözmek için başka bir yolu da sabit konumlandırma geçmek için ise: Elbette

#EvilElement { 
    position: fixed; 
} 

bu diğer yan etkileri olabilir, ancak tüm sayfayla ilgili yatay kaydırma çubukları devre dışı bırakmaz.

Answer 3

Bugzilla issue ile ilgili bir yorum yapan iyi bir nokta: Bu, position: relative ile aynı davranıştır. Orijinal elemanın yeri korunur, ancak dönüştürülmüş öğe görüntülenebilir konteynerinin (görünüm penceresi veya kaydırılabilir öğe) dışına taşınırsa, kaydırma çubukları eklenir.

Bu, özelliklerle uyumludur ve büyük olasılıkla "düzeltmeyecek" olur.