Why Hardware-Accelerated CSS animation cost too much "composite layer" times in main thread?

Question

I use a big picture(33440 x 440) and transform the big image, then achieve a animation like as frame animation; and also I use the translate3D to get a GPU Acceleration,

simplified code below:

 @keyframes testName { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-33440px,0,0); } }

as we know, the work of composite layers will move to GPU; but in chrome devtools of performance, the task of composite layers in main thread cost too much time: (decode image happens in raster thread not in main thread)

so why and what the taskcomposite layers did in main thread?

laptou · Accepted Answer · 2020-02-25 04:20:18Z

1

The problem is that your image is HUGE. "Compositing layers" roughly means rendering all of the elements (layers) on the page on top of each other in the correct order and location, which will take a long time if these layers are gigantic. Just because it's happening on the GPU doesn't mean it will happen instantly if you throw a 14 megapixel image into it.

answered Feb 25, 2020 at 4:20

laptou

7,1073 gold badges34 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SKing7 Over a year ago

can you be more detail? Where did “this long time” take？

SKing7 Over a year ago

or what dose composite layers means in Chrome Dev Tools?

Dominik Bucher Over a year ago

Encountered this as well, with an image of 16000x9000 that was scaled down to a thumbnail - when any animations are enabled Chrome becomes basically unresponsive. Seemed to work a lot better in other browsers though.

Uche Ozoemena Over a year ago

@SKing7 did you find a solution apart from resizing/optimizing the image?

Collectives™ on Stack Overflow

Why Hardware-Accelerated CSS animation cost too much "composite layer" times in main thread?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related