2012-07-16 19 views
6

3D kullanmadan web kümesindeki CSS'yi kullanarak (2) (Are 2D transforms hardware accelerated in Mobile Safari? uyarınca) 2B dönüşümünde donanımsal hızlandırmayı zorlama var mı?Webkit: 3D CSS özelliklerini kullanmadan 2B dönüşümler için CSS kuvvet donanım hızlandırması

ben eleman position: absolute eşdeğer bir şey olarak ayarlanır position: fixed elemanları, görüntü alanına kadar konumlandırılmamış akrabası konuyu buluyorum, daha doğrusu bu madde http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ açıklandığı gibi üst kabına göre konumlandırılmış akrabası (biter).

Arka plan, iOS'taki geçişlerde beyazı titretme eğiliminde olduğundan, bu hata https://github.com/jquery/jquery-mobile/issues/2856'un ana hatlarıyla benzer şekilde donanım ivmesini seçiyorum.

Sen dönüştürmek için 2d ek olarak null dönüşümü değerini değer bir 3d ekleyebilir

cevap

1

:

el { 
    transform: 2DValue(val) 3DValueSetToNull(0); 
    transform: 2DValue(val); 
} 

gibi bir şey yapabilir gerçek CSS hangi a 3D kullandığınızdan emin olun

div { 
    /* translateZ(0) will not interfere with the rotate value */ 
    /* Also with -webkit-, -moz-, -o- */ 
    transform: rotate(90deg) translateZ(0); 
    /* Compatibility for older (yep) browsers */ 
    /* Also with -webkit-, -moz-, -ms-, -o- */ 
    transform: rotate(90deg); 
} 

2D dönüşüm değerinize müdahale etmeyecek olan değeri dönüştürün.

Not:

  • translate3d (x, y, z)
  • translateZ (z)
  • scale3d (sx, sy, SZ)
  • scaleZ (sz: 3d değerleri dönüşümü)
  • rotateX (açı)
  • rotateY (açı)
  • rotate3d (x, y, z, açı),
  • Bu backface-visibility: hidden ayarı benziyor
  • perspektif (p)
  • Matrix3D (...)
+0

Teşekkürler - bu değerlerin hepsi 3D CSS özellikleridir, * bir 3D dönüşümü uygulamadığı, ancak donanım hızlandırmayı zorlamadığı bir değer arıyorum. 3B dönüşümler, öğenin konumlandırmasını etkilemeyen bir değere sahip olsa bile, 'konum: sabit' elemanlarının ilk konum: göreceli 'ebeveyne göre konumlandırılması zorlanır. –

0

hile yok. Bunu yalnızca fps-counter kullanarak krom için onaylamıştım.

.3d-accelerate { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 

FPS sayacı sadece transition ile görünmüyor. translate: transform3d(0, 0, 0) eklerken görünür. Ben de sadece backface-visibility ile çıkageliyorum.

+0

Bunun doğru cevap olabileceği görülüyor, test vakasında test edilmesi gerekiyor. –