Webkit: 3D CSS özelliklerini kullanmadan 2B dönüşümler için CSS kuvvet donanım hızlandırması

Question

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ı?

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

Answer 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 (...)

Answer 2

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.