100

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!

6
  • 4
    What the answers are missing: It actually translates the element by 0 pixel on the x-, y- and z-axis. ;) Commented Aug 30, 2013 at 9: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
    Commented Feb 25, 2014 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. Commented Feb 28, 2014 at 16:52
  • 3
    For future reference: will-change will also separate the html element into it's own layer. developer.mozilla.org/en-US/docs/Web/CSS/will-change. will-change will replace the -webkit-transform:translate3d(0,0,0) hack. Commented May 27, 2015 at 14:44
  • don't use it with * css selector all my links went inactive :)
    – stefan
    Commented Oct 8, 2015 at 10:00

6 Answers 6

129

-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.

8
  • 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? Commented Apr 8, 2014 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
    Commented Apr 8, 2014 at 18:57
  • For an example, bootstrap's carousel is using this, while moving the displayed image right to left.
    – Ethan
    Commented Feb 17, 2015 at 8:21
  • @YotamOmer Can we alternatively use translateZ(0) or scale3d(1,1,1) to engage the h/w accelerator?
    – Ethan
    Commented Feb 17, 2015 at 8:39
  • 1
    @Ethan Yes, according to this both should work. I knew only about the 3d transformation but apparently translateZ will also do the trick in most browsers.
    – Yotam Omer
    Commented Feb 17, 2015 at 11:22
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);
}
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);
}
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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.