Webkit metin takma, CSS3 animasyonları sırasında garipleşiyor

Bu çok komik bir özellik. Ve eminim ki webkit ile alakalı çünkü sadece Chrome Version 20.0.1132.57 ve Safari 5.1.7'de bir sorun gibi görünüyor. Konuyu açıklamak için kısa bir video yükledim çünkü metinle açıklamak neredeyse imkansız olurdu.Webkit metin takma, CSS3 animasyonları sırasında garipleşiyor

video: http://youtu.be/0XttO-Diz2g

Kısa versiyonu: Bir konumlandırılmış elemanın içindeyse CSS3 animasyonlar sırasında , metin (mutlak veya göreceli) onun düzgünleştirme değiştirmek gibi görünüyor. Animasyonlar çalışırken daha cesur olur.

Not: Bu, ölçeklenmiş öğelerin bir animasyona bulanık bir şekilde yönlendirilmesiyle aynı şey değildir. (this issue)

Herhangi bir düşünce, geçici çözüm, vb?

kaynak

2012-07-21 Jeremy Ricketts

İlgili kod videodadır, ancak kısa bir süre sonra jsFiddle uygulamasında yeniden oluşturmayı deneyeceğim. –

Video bağlantısı artık çalışmıyor. – ChrisF

Sorunu gösteren bir jsfidle [burada] (http://jsfiddle.net/russelluresti/UeNFK/) [bu benzer sorudan nezaket (http://stackoverflow.com/questions/12502234/how-to-prevent -webkit-text-değişim-sırasında-css-geçiş render)). –

Güncelleştirme: Aşağıdaki eski yanıtım çalışır, ancak sorunu çözmek için yalnızca kolay bir yoldur. Bunun yerine, diğer öğelerin neden etkilendiğini anlamak için bunu okuyun: http://jsbin.com/efirip/5/quiet. Kısacası: Animasyonlu bir öğe, z-index vererek kendi istifleme bağlamında yerleştirilmelidir.

Eski cevap: O WebKit alakalı

. Dürüstçe neden yaptığından emin değilim ve bunun bir hata olduğunu da farz ediyorum. Sayfadaki herhangi bir öğeye 3D ile ilgili CSS3 bildirimi ekleyerek bunu önleyebilirsiniz. Örnek:

body { 
    -webkit-transform: translateZ(0); 
}

Veya:

body { 
    -webkit-backface-visibility: hidden; 
}

bu beyanların varlığı size işaret ettik sorunu önler animasyonlar için donanım hızlandırma kullanımı WebKit'i neden olur.

kaynak

2012-07-21 08:27:19

WOW. İşe yaradı. Dünyada bunu nasıl anladın? Aferin! –

Karanlıkta sadece bir bıçak! –

** + 1 ** Mükemmel cevap! – arttronics

Webkit metin takma, CSS3 animasyonları sırasında garipleşiyor

cevap

İlgili konular