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

Question

what makes -webkit-transform: translate3d(0,0,0); right? Are there any performance issues? Should I just apply it to the body or to individual elements? This seems to greatly improve scroll events.

Thank you for the lesson!

Answer 1

-webkit-transform: translate3d(0,0,0); forces some devices to trigger hardware acceleration.

Good reading found here.

Native applications can access the graphics processing unit (GPU) to make the pixels fly. On the other hand, web applications work in a browser context, which allows the program to do the most (if not all) of rendering, which leads to less power for transitions. But the Internet is catching up, and most browser providers now provide graphical hardware acceleration using certain CSS rules.

Using -webkit-transform: translate3d(0,0,0); will cause the GPU to take effect for CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object 0px along the x, y, and z axes. This is just a way to force hardware acceleration.

---

An alternative is -webkit-transform: translateZ(0) . And if both Chrome and Safari flicker due to conversions, try -webkit-backface-visibility: hidden and -webkit-perspective: 1000 . See this article for more information.

Answer 2

I have not seen an answer here that explains this. Many transformations can be performed by calculating each of the div and its parameters using a complex set of validations. However, if you use the 3D function, each of the 2D elements that you have is treated as 3D elements, and we can perform the matrix transformation on these elements on the fly. However, most of the elements are "technically" already hardware accelerated, because they all use a graphics processor. But 3D transforms work directly on cached versions of each of these 2D renderings (or cached versions of div ) and directly use matrix transformations on them (which are FP vectorized and parallel maths).

It is important to note that 3D transforms ONLY make changes to functions on a cached 2D div (in other words, a div is already a rendered image). Thus, things, such as changing the width and color of the border, are no longer "3D" to speak dimly. If you think about it, changing the width of the borders requires you to reload the div , because so does recache so that 3D transforms can be applied.

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

To answer your question, translate3d: 0x 0y 0z will not do anything, since the transformations work directly with the texture, which is formed by running div vertices in the GPU shader. This shader resource is now cached, and the matrix will be applied when drawing to the frame buffer. Thus, in principle, there is no benefit from this.

This is how the browser works inside.

Step 1: Input for Analysis

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

Step 2. Development of a 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: Create a 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 is a bug with scrolling in MobileSafary (iOS 5), which causes artifacts to appear as copies of input elements in the scroll container.

Using translate3d for each child can fix this odd error. Here is an example of CSS that saved me a day.

 .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 of .CSS animations, transformations, and transitions not automatically accelerated by the GPU , but instead performs a slow software rendering engine from the browser. To use the GPU, we use translate3d

Currently, browsers such as Chrome, FireFox, Safari, IE9 + and the latest version of Opera have hardware acceleration, they only use it when they have an indication that the DOM element will benefit from it.

Answer 5

Remember that it creates a stack context (plus what other answers say), so this could potentially affect what you see, for example, something appears above the overlay if it is not intended.