2012-04-03 19 views
12

http://jsfiddle.net/nicktheandroid/5Ytnj/, bir öğeyi css3 ölçeği ile ölçeklendirirken, animasyon tamamlanana kadar pikselli hale gelir. Ben <code>.circ</code> elemana <code>-webkit-backface-visibility: hidden;</code> eklediğinizde bir sınırın

bir öğe animasyon ediyorum, bunun animasyon tamamlandıktan sonra bile pikselli kalmaya neden olur.

Animasyon yaparken piksellememenin bir yolu olup olmadığını merak ediyorum. Google Chrome'un dev sürümünde görüntüledim.

+1

Aynı sorunla karşılaşıyorum, çünkü içindeki bir düğmenin ölçeklemesinde sorun yaşıyorum. Belirtilenin bir _similar_ problemi (burada) (http://stackoverflow.com/q/8024061/432913). Sınırın önemli olmaması, [metinle de olur] (http://jsfiddle.net/Qk9gX/). – will

cevap

16

Tamam, sanırım etrafta bir iş buldum; Esas olarak; "ölçek" kullanmayın. "scale3d" yi kullanın ve görüntüyü istediğiniz en büyük scale3d(1,1,1) olacak şekilde ayarlayın.

Here, içinde bulunduğunuz daire ile ilgili bir örnektir. Ölçeği 5 olarak değiştirdim, çünkü 0.2322222222222222222222222222222222'yi scale3d func ...

[edit] içine koymak istemedim. Bu yüzden jsfiddle demosunu tekrar donanım hızlandırması olmayan bir bilgisayarda ve pikselleştirme efektini denedim gitmişti. Öyleyse, bu, bir dokuya dönüştürdüğü ve daha sonra ölçeklendirdiği scale3d ile aynı problem gibi görünüyor. circ3 div here'da olduğu gibi yapabilirsiniz.

+0

Teşekkürler, bu benim de sorunumu çözdü! Başlangıç ​​durumu için scale3d'yi (1,1,1) açıkça belirleme (yani CSS sınıfı), daha sonra geçiş sınıfı için scale3d (1.5, 1.5, 1.5) kullanarak, hile yaptı. Kabul edilen cevap olmalı. –

+1

Benim için hiçbir fark yaratmadı, görüntü başlangıçta net, scale3d ile ölçekleme boyunca pikseller ve animasyondan sonra temizle. – Rob

+0

@Rob Tarayıcının bağımlı olduğundan ve GPU bağımlı olduğundan eminim. Firefox için çeşitli yapılandırma bitlerinde değiştirebilirsiniz ve kromda gpu hızlandırmayı zorlamak/devre dışı bırakmak için bir komut satırı argümanı ekleyebilirsiniz. – will