- This topic is empty.
July 29, 2015 at 2:30 am #205720MaximeParticipant
Sorry for the (too much) catchy title, but I really need help about CSS3 animations which really make my computer mad.
I have 5 rotating divs with 5 SVG backgrounds on my page and after ~ 30 seconds, my computers fans turns on and it makes the user experience very poor.
My questions are:
– Are SVG background + CSS3 animations a problem for performance?
– Is there a way to make it lighter?
Sorry for the bad english,
MaximeJuly 29, 2015 at 2:37 am #205721
You computer is working very hard with that much going on.
It’s basically constantly re-rendering the page…so it’s hardly suprising that heat is being generated by the CPU/GPU.
You have to run some rendering tests and examine the actually loading you’re putting on the processors to see what’s actually happening.
It’s not really a CSS issue I suspect…more of an engineering one.July 29, 2015 at 3:00 am #205724MaximeParticipant
Thanks Paulie_D for your answer :)
Indeed, CPU/GPU usage is very high. I tested it and each animation add CPU/GPU usage. Is there a solution to have a dynamic rendering or something like that? Or just optimize the performances?
Thanks,July 29, 2015 at 3:39 am #205726
Frankly that’s beyond my expertise so I don’t think I can ofer much more.
I’ll push this over to “Other Dicussions” which, I think, is a better fit.July 29, 2015 at 3:41 am #205727
Note, a quick google for “CSS animations CPU Usage” found this – http://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
I’m sure you can get similar results.
Obviously without knowing exactly what the animations are it’s hard to be more specific.July 29, 2015 at 10:15 am #205743ShikkedielParticipant
Here’s a few that I know of that’ll make CSS (and other) animation unnecessarily slow :
Not using transforms, pixel animations that influence document flow work on another thread and make things slow and glitschy.
Fixed position that is also using a permanent CSS transform. Repainting this has a huge impact when scrolling. I noticed this most on webkit browsers and it can be eliminated by using
backface-visibility: hidden. The jury’s still out on why exactly but apparently this promotes it to an independent layer.July 29, 2015 at 10:47 am #205744ShikkedielParticipant
Anybody know of a way to specify the width of a video by the way? This direct link was all that worked, an embedded iframe (made a bit smaller) only showed some internal forum code and the link itself in plain text.
- The forum ‘Other’ is closed to new topics and replies.