99

what does -webkit-transform: translate3d(0,0,0); exactly do? Does it have any performance issues? Should I just apply it to the body or individual elements? It seems to improve scroll events drastically.

Thanks for the lesson!

WIWIWWIISpitFire
  • 1,539
  • 1
  • 12
  • 20
  • 4
    What the answers are missing: It actually translates the element by 0 pixel on the x-, y- and z-axis. ;) – insertusernamehere Aug 30 '13 at 09:36
  • It also has an impact on font rendering, especially visible on large font-sizes. Otherwise smooth edges appear aliased again. Might be Browser or OS specific, observed this in Chrome 33 on Windows 7. – patrickj Feb 25 '14 at 17:53
  • 1
    @patrickj I've also started to notice slightly different behaviour with `translate3d(0,0,0)` on Chrome 33 (33.0.1750.117m) on Windows 7. It made one of my elements invisible, so I removed it. – David Sherret Feb 28 '14 at 16:52
  • 3
    For future reference: `will-change` will also separate the html element into it's own layer. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change. `will-change` will replace the `-webkit-transform:translate3d(0,0,0)` hack. – Jason Lydon May 27 '15 at 14:44
  • don't use it with * css selector all my links went inactive :) – stefan Oct 08 '15 at 10:00
  • perspective css crushes performance in safari now , mine is in a scroll layer. – yeahdixon Aug 13 '21 at 18:10

6 Answers6

128

-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.

A good read is found Here

Native applications can 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.


An alternative is -webkit-transform: translateZ(0). And If there's flickering on Chrome and Safari due to transforms, try -webkit-backface-visibility: hidden and -webkit-perspective: 1000. For more info refer to this article.

Yotam Omer
  • 15,310
  • 11
  • 62
  • 65
  • I am not sure whether applying a matrix transform on the cached texture would really improve benefit. When the content is moved from cached texture to the framebuffer, the transform would boost performance for complex operation, but do no benefit for normal paint events. It won't do any harm nor have any benefit. Correct me if I am wrong? – Mathew Kurian Apr 08 '14 at 15:05
  • I think even normal paints will get accelerated.. one of the layer creation criteria is "3D or perspective transform CSS properties". – Yotam Omer Apr 08 '14 at 18:57
  • For an example, bootstrap's carousel is using this, while moving the displayed image right to left. – Ethan Feb 17 '15 at 08:21
  • @YotamOmer Can we alternatively use translateZ(0) or scale3d(1,1,1) to engage the h/w accelerator? – Ethan Feb 17 '15 at 08:39
  • 1
    @Ethan Yes, according to [this](http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css) both should work. I knew only about the 3d transformation but apparently `translateZ` will also do the trick in most browsers. – Yotam Omer Feb 17 '15 at 11:22
  • @YotamOmer Thanks for the link. I find 'backface-visibility' and 'perspective' on bootstrap's carousel also (check class="item active"), that's probably an added confirmation. But 1 thing is still perplexing, should we add it to the element or it's parent? There has been several discussions stating on the parent. – Ethan Feb 17 '15 at 13:01
  • `translate3d(0,0,0)` and `translateZ(0)` produce problems with position fixex. `-webkit-font-smoothing: antialiased;` is another way to tap into 3D acceleration without creating these problems, but it only works in Safari. [source](http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0/10814448#10814448) – Watchmaker May 19 '17 at 11:38
  • -webkit-perspective: 1000 , actually kills performance on mac – yeahdixon Aug 13 '21 at 18:11
12

I didn't see an answer here that explains this. Lots of transformations can be done by calculating each of the div and its options using a complicated set of validation. However, if you use a 3D function, each of the 2D elements you have are considered as 3D elements and we can perform a matrix transformation on these elements on the fly. However, most of the the elements are "technically" already hardware accelerated because they all use the GPU. But, the 3D transforms work directly on the cached versions of each of these 2D renders (or cached versions of the div) and directly use a matrix transformation on them (which are vectorized and parallelized FP math).

It is important to note that 3D transforms ONLY makes changes to features on a cached 2D div (in other words, the div is already a rendered image). So, things like changing the border width and color are no longer "3D" to be vaguely speaking. If you think about it, changing the border widths require you to rerender the div because and recache it so that the 3D transforms can be applied.

Hope this makes sense and let me know if you have any more questions.

To answer your quesetion, translate3d: 0x 0y 0z would do nothing since the transforms work directly on the texture that is formed by running the vertices of the div into the GPU shader. This shader resource is now cached and a matrix will be applied when drawing onto the frame buffer. So, basically there is no benefit from doing that.

This is how the browser works internally.

Step 1: Parse Input

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Step 2: Develop Composite Layer

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

Step 3: Render Composite Layer

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}
Mathew Kurian
  • 5,949
  • 5
  • 46
  • 73
6

There's a bug with scrolling in MobileSafary (iOS 5) which leads to appearing artifacts as copies of input elements in the scrolling container.

Using translate3d for each child element can fix that odd bug. Here's an example of CSS which saved the day for me.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}
Sergiy Seletskyy
  • 16,236
  • 7
  • 69
  • 80
5

Translate3D forces hardware acceleration.CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine.In order to use GPU we use translate3d

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all come with hardware acceleration, they only use it when they have an indication that a DOM element would benefit from it.

Prasanna Aarthi
  • 3,439
  • 4
  • 26
  • 48
5

Be aware that it creates a stacking context (plus what the other answers said), so it does potentially have an effect on what you see, e.g. making something appear over an overlay when it isn't supposed to.

Jason Young
  • 439
  • 1
  • 8
  • 18
0

I'm using mathlive and tiptap, and in my case this line caused unintended scroll to the top of the page during formulas editing.

maveriq
  • 456
  • 4
  • 14