108

A number of blogs have expressed the performance gain in 'tricking' the GPU to think that an element is 3D by using transform: translateZ(0) to speed up animations and transitions. I was wondering if there are implications to using this transform in the following manner:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
mc_kaiser
  • 717
  • 8
  • 18
Ahmed Nuaman
  • 12,662
  • 15
  • 55
  • 87
  • 6
    can you link to those blog articles? – Jürgen Paul Oct 06 '13 at 13:59
  • @PineappleUndertheSea this one: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css sent me here. –  Mar 13 '14 at 21:39
  • Btw, `-o-transform: translateZ(0)` has never been a thing. http://caniuse.com/#search=translate3d – Volker E. Jan 03 '17 at 02:53
  • @Ahmed Nuaman yes it is not only a trick. But it is officially used in some app. But if you end up on a device(low end) without GPU... I'm not sure how it performs. But since if what a processor can do(2D Graphics) is delegated to GPU for the reason only that there is 3D command although it has no final impact. And 3D uses multiple cores inside it and performs faster. This is what makes sense here. Needs some more investigation... – TooGeeky Jul 18 '17 at 18:40

5 Answers5

109

CSS transformations create a new stacking context and containing block, as described in the spec. In plain English, this means that fixed position elements with a transformation applied to them will act more like absolutely positioned elements, and z-index values are likely to get screwed with.

If you take a look at this demo, you'll see what I mean. The second div has a transformation applied to it, meaning that it creates a new stacking context, and the pseudo elements are stacked on top rather than below.

So basically, don't do that. Apply a 3D transformation only when you need the optimization. -webkit-font-smoothing: antialiased; is another way to tap into 3D acceleration without creating these problems, but it only works in Safari.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
Dan Eden
  • 1,494
  • 1
  • 11
  • 12
30

If you want implications, in some scenarios Google Chrome performance is horrible with hardware acceleration enabled. Oddly enough, changing the "trick" to -webkit-transform: rotateZ(360deg); worked just fine.

I don't believe we ever figured out why.

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 3
    I had issues like squeezed images and horribly wrong animations using max-height in Safari 5 and 6. When I disabled GPU acceleration (translateZ(0)), everything worked as intended, but the animation wasn't smooth enough. I changed translateZ(0) to rotateZ(360deg), and suddenly the animations were smooth and hardware accelerated and there were no issues any more. – jakub_jo Mar 30 '15 at 13:52
15

It forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. It moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

Good read here: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

mc_kaiser
  • 717
  • 8
  • 18
7

I can attest to the fact that -webkit-transform: translate3d(0, 0, 0); will mess with the new position: -webkit-sticky; property. With a left drawer navigation pattern that I was working on, the hardware acceleration I wanted with the transform property was messing with the fixed positioning of my top nav bar. I turned off the transform and the positioning worked fine.

Luckily, I seem to have had hardware acceleration on already, because I had -webkit-font-smoothing: antialiased on the html element. I was testing this behavior in iOS7 and Android.

J. Hogue
  • 314
  • 4
  • 11
5

On mobile devices sending everything to the GPU will cause a memory overload and crash the application. I encountered this on an iPad app in Cordova. Best to only send the required items to the GPU, the divs that you're specifically moving around.

Better yet, use the 3d transitions transforms to do the animations like translateX(50px) as opposed to left:50px;

Perry
  • 869
  • 9
  • 14