Webkit: CSS fuerza aceleración de hardware para transformaciones 2D sin usar propiedades 3D CSS

Question

¿Hay alguna forma de forzar aceleración de hardware en transformación 2D usando CSS en webkit sin usar 3D (por ejemplo translateZ(0)) (según Are 2D transforms hardware accelerated in Mobile Safari?).

Estoy encontrando el problema con position: fixed elementos, donde el elemento se establece en algo equivalente a position: absolute, de modo que no esté situado en relación con el área de visualización, sino que termina posicionado con respecto al contenedor principal (como se explica en este artículo http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/)

Estoy eligiendo la aceleración de hardware ya que el fondo tiende a parpadear en blanco en las transiciones en iOS, de forma similar a como este error describe https://github.com/jquery/jquery-mobile/issues/2856.

Answer 1

Se puede añadir un 3d transformar valor a cero, además de su 2d transformar valor:

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

Lo que en CSS real puede hacer algo como:

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

Asegúrese de utilizar un 3D transforma el valor que no interferirá con su valor de transformación 2D.

PS: El 3d transformar valores son:

• translate3d (x, y, z)
• translateZ (z)
• scale3d (sx, sy, sz)
• scaleZ (sz)
• rotateX (ángulo)
• rotateY (ángulo)
• ROTATE3D (x, y, z, el ángulo),
• perspectiva (p)
• Matrix3D (...)

Answer 2

Parece que el establecimiento backface-visibility: hidden hace el truco. Confirmé esto solo para Chrome, usando fps-counter.

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

El contador de FPS no se presenta sólo con transition. Se muestra al agregar translate: transform3d(0, 0, 0). También aparece con solo backface-visibility.