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.
Best Answer
You can add a 3d transform value to null in addition to your 2d transform value :
Which in real CSS can make something like :
Be sure to use a 3D transform value that will not interfere with your 2D transform value.
PS : The 3d transform values are :