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

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

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