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

Question

Is there anyway forced hardware acceleration when converting 2D using CSS to webkit without using 3D (e.g. translateZ(0) ) (according to Are 2D transformations hardware accelerated in Mobile Safari? ).

I find a problem with position: fixed elements, where the element is set to something equivalent to position: absolute , therefore it does not fit relative to the viewport, but ends with the position 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 choose hardware acceleration because the background tends to flicker white on transitions in iOS, similar to how this error highlights 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 one of the real CSS can do 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: 3D conversion values:

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

Answer 2

It seems that setting backface-visibility: hidden does the trick. I confirmed this only for chrome using fps-counter .

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

The FPS counter is not displayed only with transition . It appears when adding translate: transform3d(0, 0, 0) . I also show only backface-visibility .