Renkli (ızgarayla takılı) metin içeren öğelerdeki 'jumpy' CSS geçişlerini engelle

Question

Çalıştığım bir web sitesinde bazı başlıklarda bazı CSS3 geçişlerini uygulamaya çalışıyorum, ancak metin içeren öğelerle ilgili geçişler hakkında bir şeyler var Bu gerçekten beni rahatsız ediyor: bir fontun gliflerini ima eden veya ızgaraya uyan tarayıcılarda (ki bunların çoğunu belki de bar, belki de Safari), görebileceğiniz bir geçişin başlangıcında ve sonunda gözle görülür bir 'atlama' var Bu metin, bu jsfiddle'de gösterildiği gibi piksel ızgarasına geri çekilir: http://jsfiddle.net/8csA9/20/ (bunun bir kısmı filtrelemeden dolayı muhtemelen anlık bir bulanıklıktır, ancak en azından FF ve Chrome'da kesinlikle bir şekil değişikliği var)

Normalde yazı tipi oluşturmanın karmaşıklıklarını karıştırmayı düşünmüyorum, ancak düşünün Gliflerin çok büyük olması, bu durumda gerçekten önemli olmadığını hissetmekteyim ve ipuçlarını devre dışı bırakmanın bir yolu ya da bu geçişleri biraz daha pürüzsüz hale getirmenin başka bir yolu olup olmadığını merak ediyordum. Bunun yapılabileceğini bilen var mı, nasıl?

Not: sadece sadece statik bir rotasyon da Firefox metin ipucu devam azından yapar uygulayarak, geçişler ve sonuç oldukça görünümlü biter ötesinde bu soru aslında .. garip

PPS biraz uzatır: Orada yapar '-webkit-font-smoothing' özelliği var gibi görünüyor (ya da var), ancak CSS3-fontlar taslağı temel aldığı kuralı (font-pürüzsüz) bırakmış gibi görünüyor ve sadece Chrome'da çalışmış gibi görünüyor. Mac için

Answer 1

Kullanım Arkadan görünüş: Gizli; ** Güncelleme: Webkit moz mz ve arka yüz görünürlüğü üzerinde standart http://jsfiddle.net/jugularkill/58S2z/4/

Daha: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

Answer 2

Bu benim için bir cazibe gibi çalıştı. Geçiş özelliği olan öğelere "arka yüz görünürlüğü: gizli" (büyük tarayıcı önekleri) ekledim ve geçiş sırasında karşılaştığım atlama/titreşimi çözdüm. Firefox, IE (9/10) ve Chrome'da test ettim.

Yine de fark ettiğim bir şey: Özelliğin, öğenin sözde sınıfına (ör., Gezici, etkin ...) karşıt olarak öğenin doğal durumuna eklediğinizden emin olun. donanım hızlandırmalı 3D geçişleri kullanmak tarayıcı zorlar çünkü

.backface-visibility(hidden); 

Answer 3

Eğer bu sınıfı kullanabilirsiniz Bootstrap kullanıyorsanız.

Answer 4

transform: translate3d(0, 0, 0); veya transform: translateZ(0); sıklıkla geçiş hataları düzeltmek için yardımcı olur ekleme:

Answer 5

Benim için, backface-visibility: hidden ve transform-style: preserve-3d hem de sarsıntılı içerik içeren öğeye eklemem gerektiğini buldum. Örneğin

:

.element-with-jumpy-content { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
}