CODEWITHSUNDEEP
css3dhardware-accelerationcss-transforms
Dan Eastwell
Dan Eastwell

Reputation: 5214

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

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.

Upvotes: 6

Views: 6667

Answers (2)

Arnold Daniels
Arnold Daniels

Reputation: 16573

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.

Upvotes: 0

Calvein
Calvein

Reputation: 2121

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(…)

Upvotes: 1

Related Questions