Why Does Enabling Hardware-Acceleration in CSS3 Slow Down Performance

Why does enabling hardware-acceleration in CSS3 slow down performance?

The reason animation was slower when you added the null transform hack (translateZ(0)) is that each null 3D transform creates a new layer. When there are too many of these layers, rendering performance suffers because the browser needs to send a lot of textures to the GPU.

The problem was noticed in 2013 on Apple's homepage, which abused the null transform hack. See http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

The OP also correctly noticed the explanation in their comment:

Moving few big objects is more performant than moving lots of small items when using 3D-acceleration because all the 3D-accelerated layers have to be transferred to the GPU and the way back. So even if the GPU does a good job, the transfer of many objects might be a problem so that using GPU acceleration might not be worth it.

How to benchmark CSS3 hardware acceleration translate3d, and should I apply it to body element?

Hardware acceleration on the web is somewhat subjective.

Just because you've convinced the browser to utilize hardware-acceleration doesn't mean it will actually improve perceived performance.

1. Your GPU can't solve choppy animation caused due to forcing the browser to repaint/redraw significant sections of the window. So you need to understand what causes a browser to repaint. In general, composite properties like opacity and transform are best.
2. The human eye can realistically perceive frame rates up to around 150fps. BUT, the average computer display in 2019 is typically around 60Hz which equates to 60fps. Basically, you'd need a high-end gaming monitor to really test this for human perception. All that to say there's little value in getting a small FPS increase with the GPU on an already highly performant animation.

Benchmarking animation

Chrome's Devtools have several useful tools to help you understand animation. I'm going to use Google's fun Game of the Year for these examples.

The Performance tab. You have to let this start recording and it will then show you FPS at a point in time or an average as a bar horizontal to the "Frames" label. It will also show you how long a specific composite took.

Layers Tab You can access this in Dev tools by selecting the three dots icon -> More Tools -> Layers

Once you have this tab open, you can select individual elements to see paint count, memory usage and what type of visual compositing is being used (and why).

Rendering Details Finally, you can add real-time FPS counters and repaint visualization by opening the "rendering" panel also found in the "more tools" menu. This will add overlays to the actual browser window so you can track what happens as you change things.

Increasing the speed of hardware accelerated css3 animation

I think this is just a limitation of the current hardware acceleration implementations. Once the animation starts, off it goes.

(Folk wisdom - it's said to be a bad idea to give very large dimensions (aka width: 13000px) to blocks that you want to animate - it makes the GPU create huge objects)

CSS performance relative to translateZ(0)

CSS transformations create a new stacking context and containing block, as described in the spec. In plain English, this means that fixed position elements with a transformation applied to them will act more like absolutely positioned elements, and z-index values are likely to get screwed with.

If you take a look at this demo, you'll see what I mean. The second div has a transformation applied to it, meaning that it creates a new stacking context, and the pseudo elements are stacked on top rather than below.

So basically, don't do that. Apply a 3D transformation only when you need the optimization. -webkit-font-smoothing: antialiased; is another way to tap into 3D acceleration without creating these problems, but it only works in Safari.

Enabling hardware acceleration: translate3d

An hint to the third part:

You should keep in mind that browsers already optimize the layout and design animations. Forcing hardware acceleration to each animated element is counter-productive as you cancel any browser optimizations with this. You should always use proper tools to measure your websites rendering performance before even thinking about using such hacks.

In short: browsers are getting smarter and smarter with each new version and you – as a single person – can't be more clever than a whole bunch of developers who sometimes work for years on a rendering engine.

---

Related Topics