Webkit: il CSS forza l'accelerazione hardware per le trasformazioni 2D senza utilizzare le proprietà CSS 3D

Question

Esiste comunque la possibilità di forzare l'accelerazione hardware sulla trasformazione 2D utilizzando CSS nel webkit senza utilizzare il 3D (ad esempio) (come da Are 2D transforms hardware accelerated in Mobile Safari?).

mi sto trovando il problema con position: fixed elementi, dove l'elemento è impostato su qualcosa di equivalente a position: absolute, relativa quindi non posizionato alla finestra, anzi finisce relativo posizionato al contenitore principale (come spiegato in questo articolo http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).

Sto scegliendo l'accelerazione hardware in quanto lo sfondo tende a sfarfallare il bianco sulle transizioni in iOS, in modo simile a come questo bug delinea https://github.com/jquery/jquery-mobile/issues/2856.

Answer 1

È possibile aggiungere un 3d trasformare il valore null in aggiunta al tuo 2d trasformare il valore:

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

Che a sua reale CSS può fare qualcosa di simile:

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); 
} 

Assicurarsi di utilizzare un 3D trasforma il valore che non interferirà con il tuo valore di trasformazione 2D.

PS: Trasformazione 3D valori sono:

• translate3d (x, y, z)
• translateZ (z)
• scale3d (sx, sy, sz)
• scaleZ (sz)
• rotateX (angolo)
• RotateY (angolo)
• Ruota3D (x, y, z, angolo),
• prospettiva (p)
• Matrix3D (...)

Answer 2

Sembra impostazione backface-visibility: hidden fa il trucco. L'ho confermato solo per chrome, usando lo fps-counter.

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

Il contatore FPS non si presenta solo transition. Si presenta quando si aggiunge translate: transform3d(0, 0, 0). Mi mostra anche con solo backface-visibility.