CODEWITHSUNDEEP
cssfirefoxcss-animationscpu-usage
Pepijn
Pepijn

Reputation: 4253

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

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.

enter image description here

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)

Upvotes: 1

Views: 724

Answers (1)

vals
vals

Reputation: 64164

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)

Upvotes: 1

Related Questions