Webkit: CSS erzwingt Hardwarebeschleunigung für 2D-Transformationen ohne Verwendung von 3D-CSS-Eigenschaften

Question

Gibt es trotzdem eine Hardwarebeschleunigung bei der 2D-Transformation mithilfe von CSS im Webkit ohne Verwendung von 3D (z. B. translateZ(0)) (gemäß Are 2D transforms hardware accelerated in Mobile Safari?).

ich das Problem mit position: fixed Elemente zu finden, wo das Element etwas Gleichwertiges zu position: absolute gesetzt ist, so nicht auf das Bildfenster positioniert relativ, sondern endet es relativ zu den übergeordneten Container nach oben (wie in diesem Artikel erläutert http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).

Ich wähle Hardwarebeschleunigung, da der Hintergrund bei Übergängen in iOS tendenziell weiß flackert, ähnlich wie dieser Bug umrahmt https://github.com/jquery/jquery-mobile/issues/2856.

Answer 1

Sie ein 3D-Transformationswert auf null zusätzlich zu Ihrem 2d Wert umwandeln hinzufügen:

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

das in Echt CSS kann so etwas machen:

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

Achten Sie darauf, einen 3D verwenden Transformieren Sie den Wert, der Ihren 2D-Transformationswert nicht beeinträchtigt.

PS: Die 3D-Transformationswerte sind:

• translate3d (x, y, z)
• translateZ (z)
• Scale3D (Sx, Sy, Sz)
• scaleZ (sz)
• rotateX (Winkel)
• rotateY (Winkel)
• rotate3d (x, y, z, Winkel),
• Perspektive (p)
• matrix3d ​​(...)

Answer 2

Es ist wie backface-visibility: hidden Einstellung sieht der Trick funktioniert. Ich habe dies nur für Chrom bestätigt, mit der fps-counter.

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

Der FPS-Zähler zeigt nicht nur transition auf. Es zeigt sich beim Hinzufügen translate: transform3d(0, 0, 0). Ich tauche auch mit nur backface-visibility auf.