what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?

Question

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!

Answer 1

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

Answer 2

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);
}

Answer 3

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);
}

Answer 4

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.

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