6

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.

Community
  • 1
  • 1
Dan Eastwell
  • 5,146
  • 4
  • 22
  • 34

2 Answers2

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(…)
Calvein
  • 2,111
  • 13
  • 28
  • Thanks - those values are all 3D CSS properties, I'm looking for a value that *does not* apply a 3D transform, but does force hardware acceleration. 3D transforms, even with a value that does not affect the positioning of the element, force `position:fixed` elements to be positioned relatively to the first `position:relative` parent. – Dan Eastwell Jul 17 '12 at 08:43
0

It looks like setting backface-visibility: hidden does the trick. I've confirmed this only for chrome, using the fps-counter.

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

The FPS counter doesn't show up with only transition. It does shows up when adding translate: transform3d(0, 0, 0). I also shows up with just backface-visibility.

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82