How can I stop my CSS animation causing high Firefox and Xorg CPU usage?

Question

http://pepijndevos.nl/ uses a lot of CPU on Firefox, and surprisingly also Xorg.

There is basically no JS going on, and certainly no window resizing or stuff like that.

Tasks: 245 total, 2 running, 243 sleeping, 0 stopped, 0 zombie %Cpu(s): 8,7 us, 0,5 sy, 0,0 ni, 90,6 id, 0,0 wa, 0,0 hi, 0,2 si, 0,0 st KiB Mem: 8052196 total, 3121524 used, 4930672 free, 292388 buffers KiB Swap: 8266748 total, 0 used, 8266748 free. 1258032 cached Mem PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND 1223 root 20 0 567100 238528 73272 S 37,9 3,0 22:33.44 Xorg 5036 pepijn 20 0 2257996 543324 94428 R 31,9 6,7 16:26.62 firefox

The only JS on the page is Google Analytics, MathJax, and this small bit http://pepijndevos.nl/js/magic.js

I did a performance analysis in the Firefox debugger, which only shows Paint and Recalculate Style.

The cause seems to be the CSS animation on the background image. When I remove the animation, the system goes back to idle. The offending line is

@keyframes spin { 100% { transform:rotate(360deg) } }

I'm only rotating it really slowly, so there is absolutely no need to render the whole thing at 60fps. Is there a way to make it use less CPU? I might need to revert to the ugly setInterval solution I had years ago.

(there are a few similar questions, but I feel this is not a duplicate as my animation should not actually be taxing for any modern CPU, contrary to dozens of big fast animations with shadows and other special effects in other questions)

That is interesting. Generally transform change shouldn't cause a repaint and hence should be easier on the system. — Harry
– Harry, Commented Jan 2, 2016 at 13:02
Can you perhaps track the animation actually ended with an 'on animation end' event??, can't reproduce your issue in the URL provided, can you post a test case so we can annalyse your code?? — wolfitoXtreme
– wolfitoXtreme, Commented Jan 2, 2016 at 13:16

vals · Accepted Answer · 2016-01-08 23:44:36Z

I guess that the problem comes from position: fixed, but I am not sure.

What you can do to save CPU is to make it update less often:

animation: spin 600s steps(3600) infinite;

will make the wheel stay still for 1/6 of a second. (or. otherwise said, to refresh 6 times per second)

Collectives™ on Stack Overflow

How can I stop my CSS animation causing high Firefox and Xorg CPU usage?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related