Webkit: CSS force hardware acceleration for 2D transforms without using 3D CSS properties

Question

Is there anyway of forcing hardware acceleration on 2D transform using CSS in webkit without using 3D (e.g. translateZ(0)) (as per Are 2D transforms hardware accelerated in Mobile Safari?).

I'm finding the issue with position: fixed elements, where the element is set to something equivalent to position: absolute, so not positioned relative to the viewport, rather it ends up positioned relative to the parent container (as explained in this article http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).

I'm choosing hardware acceleration as the background tends to flicker white on transitions in iOS, in a similar way as this bug outlines https://github.com/jquery/jquery-mobile/issues/2856.

Answer 1

You can add a 3d transform value to null in addition to your 2d transform value :

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

Which in real CSS can make something like :

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

Be sure to use a 3D transform value that will not interfere with your 2D transform value.

PS : The 3d transform values are :

• translate3d(x, y, z)
• translateZ(z)
• scale3d(sx, sy, sz)
• scaleZ(sz)
• rotateX(angle)
• rotateY(angle)
• rotate3d(x, y, z, angle),
• perspective(p)
• matrix3d(…)