Open Bug 759342 Opened 13 years ago Updated 5 months ago

CSS animation High CPU

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
15 Branch
Platform:
x86
macOS
Type:
defect

Tracking

()

People

(Reporter: talktodan, Unassigned)

References

Details

Attachments

(2 files)

test-animate.html
940 bytes, text/html
Details
bg_balloons_animated.svg
10.04 KB, text/plain
Details
Attached file test-animate.html —
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5 Steps to reproduce: Visited the attached url, or link below with Firefox on Mac OSX 10.7.4. Which contains some basic CSS animations: http://dl.dropbox.com/u/5403781/firefox_css_issue/test-animate.html This was reproduced on both Firefox 12 and the firefox 15 nightly build. Actual results: The CPU usage is very high - around 30% for this stripped down version of the animation on my system. On an actual production page where this problem was spotted, CPU usage was at over 90%. Expected results: Moderate CPU usage, safari on the same system uses approx. 1% cpu time to display the same animation.
My SeaMonkey process on windows 32bit is using 2% or less with the testcase.
It's pretty high for me on Linux as well. Somebody needs to profile and see what's going on; Graphics stuff seems likely.
Attachment #627968 - Attachment mime type: text/plain → text/html
So I just tried the testcase at http://dl.dropbox.com/u/5403781/firefox_css_issue/test-animate.html I see the following results on Mac (on 10.6, though, not 10.7): Safari: About 6-7% CPU usage for Safari itself and another 4-5% for the "Safari Web Content" process. Firefox 12: About 10.5% CPU usage. Chrome: About 10% CPU usage for Chrome itself and another 7% for the "Google Chrome Renderer" process. So at least on my system we're doing pretty reasonably compared to Safari, say.....
Profiled (using Benoit Girard's profile build): http://people.mozilla.com/~bgirard/cleopatra/?report=AMIfv94J-vhE_n5GOCk4HV1HajlI8eK8nTd7_PcYOhhjVUgSVfpsLwZjBuHytGsrOPtaFpYrVQkKzrZkv79LAYdaTXFiEg35IA3oCRqMAVmkKPjRpyWbndI9fWI-QgMcRjcxnn28dPWLbP6Bg-KSZz9z_IDFBRDSdQ This is hitting us really hard. Looks like 34% spent just in mozilla::gl::GLContextCGL::SwapBuffers, which is kind of amazing, and an extra 27% soaked up by mozilla::layers::ContainerLayerOGL::RenderLayer, which has a Thebes reference buried under it.
In case it's not obvious by the heavy presence of CoreGraphics in the profile, I'm on OSX 10.7.3, running on a 2008 MBP NVIDIA GeForce 9400M 256 MB
I believe this is a regression. My bet is bug 748816. I've been noticing that glSwapBuffers got very expensive lately in video and youtube.
Status: UNCONFIRMED → NEW
Depends on: 748816
Ever confirmed: true
Sorry, mozilla16 profile: http://people.mozilla.com/~bgirard/cleopatra/?report=AMIfv94TyzQxxAubreYTboxzZyH97GJiz22izzpUMCtARkk9iW3ebFb2beM22i5aRaO8-TdVP95TQ0DXf6Cx1_5AVmoxZitKb59MkeTw3fT8Ng48bE2rfgl3kUcjEZo2OjMzwu8wUilsKCeV7NlPetqy1o3skkgBKA Seems a lot better, but still poor: FF 20-25% compared to Chrome's 2-4%. However, I've profiled the page on which we found the problem, which still crippled Firefox at almost 100% CPU usage: http://robothaus.org/mozilla/butter/v0.5.x/templates/supported/newscaster/index.html Here's the profile: http://people.mozilla.com/~bgirard/cleopatra/?report=AMIfv95S9A3VnV1Y1SsON8UdtW_8zIHmJ9qVbKE8UCjqxEaCGUGIUGbEf0KavJ4023goU6Dql66WUxHeum9_1R5YFp9pT2maqE3I4ddeH9UgtvJsUWmS7cptzod6y0DpjTJtnJHjn4WTPA2yCZYU0brBK8R1TqOc7w Not entirely sure the issue is the same, but setting the `display` property of the spinning cube to `none` drops FF's CPU usage to a much more acceptable level. So, perhaps this is just a more complex example, forcing out a more subtle bug.
It looks like the cause of this is us drawing when we should just be compositing. If you turn on paint flashing you can see that we're invalidating every frame. Safari doesn't invalidate at all.
Display list based invalidation should help here I believe.
I've noticed performance might be worse for gradient backgrounds on the panels, which is ultimately what we want to do. For reference: http://k88hudson.github.com/sadcube/test1.html http://k88hudson.github.com/sadcube/test2.html
Here's an example of some 3D transforms causing CSS animation to become particularly laggy: No cube: http://robothaus.org:8888/cornfield/view/4fe23b63a4886fd25f000004.altered.html Cube: http://robothaus.org:8888/cornfield/view/4fe23b63a4886fd25f000004.html When the cube is not present, there are no 3D transforms used, and it seems there is a huge jump in performance and smoothness.
dlbi 539356 seems to help a tiny bit here. But, http://robothaus.org:8888/cornfield/view/4fe23b63a4886fd25f000004.altered.html on Firefox (16.0a1 (2012-07-03)) still shows very high CPU usage compared to Chrome's.
Is it still reproducible? I can't reproduce it with latest Nightly build, but I'm on Windows. Still animation isn't smooth.
Hi, Its impact is reduced (~20% now) but still way more intensive than other browers on my mac.
Flags: needinfo?(talktodan)
I am experiencing high cpu usage on this webpage due to CSS animation: http://www.bbc.co.uk/radio4/programmes/schedules/fm#on-now I have recreated this problem on three different computers, on linux and on windows xp/vista. However one installation of xp was not affected. The cpu usage is caused by the CSS animation "listen live". I can stop the cpu usage by using "inspect element" and un-checking the animation. On some systems the cpu usage drops if the window is minimized. On others it drops if the animation is scrolled off the screen in firefox, or if the animation is obscured by another window. CPU usage varies from 80% in worst cases to about 30%. With animation disabled the usage drops down to ~2 or 3%. This problem affects other browsers, e.g. chromium, opera etc. I am using PCs, one Pentium 4, one AMD Athlon, one Pentium dual core.
I also has this bug in my project this is the demo of bug http://braveking.ru/test/css_animation.html - CSS-animation causes high load on CPU. On my two cores one core is completely loaded. I used even clean profile. I tried to turn off hardware acceleration, it doesn't matter. My system is Windows XP, CPU: AMD64 X2 6000+ UA: Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0 I've seen this problem long ago. In Chrome there is 0-1% cpu load. I wonder is somebody working on this bug?
I'm still running into this issue, even with a very small animated element. The CPU pegs at ~36%, this isn't the case for any other browsers. OS X 10.9.2, 2.3 GHz Intel Core i7 Firefox 32.0 What can I provide to help?
I can confirm this issue today with iceweasel on Debian. Easy to demonstrate with a fresh profile, no addons, no plugins, javascript disabled. (a) Just make the active tab showing any twitter.com profile page [2] or Der Spiegel home page [3]. CPU usage remains around 20% and 9% respectively (Core 2 Duo L9400), until switching to another "about:blank" tab: then it quickly drops to 0% as expected. (b) On the twitter page, simply removing [4] the "loading circle" CSS animation at the bottom and voila! CPU usage also drops to 0% immediately. (c) As a counter-example, Chromium [5] seems *not* to have any such issue. CPU usage drops at 0% on the same twitter profile [2] shortly after loading the page and without disabling javascript (fresh profile, no addons). [1] iceweasel 33.0-2~bpo70+1 from mozilla.debian.net (wheezy-backports repository) [2] https://twitter.com/UnGarage [3] http://www.spiegel.de/index.html [4] https://addons.mozilla.org/en-US/firefox/addon/nuke-anything-enhanced [5] chromium 37.0.2062.120-1~deb7u1 from Debian (Wheezy/stable repository)
just want to confirm same like Xavier comment 20
Cf. #20 actually it's no "CSS animation" but an animated GIF placed by CSS [1]. Rendering the GIF directly in a tab somehow takes *less* CPU usage, but still consequent (around 14% here, instead of 20% from the twitter CSS). Chromium takes around the same CPU here for that GIF alone (around 14%). It was dropping to 0% only while javascript was *not* disabled (thus *not* rendering that GIF forever, sorry for the confusion). [1] https://abs.twimg.com/a/1414171008/img/t1/spinner-rosetta-gray-26x26.gif
Cf. #21 and as i remember in iceweasel 24 that problem didnt exist or took way less cpu power than now
I just ran into a 150% CPU spike when opening https://stripe.com/au as they have some need CSS animations + opacity changes running behind the animated SVG above "Developers first" - see the little language image icons: https://screenshots.firefox.com/TEfMTEmwIIVumZLx/stripe.com Deleting the CSS animations CPU drops to ~25% with only the SVG animations running. This is Webrender disabled. Now my question is, is this bug on any radar or should I better open a new one?
Flags: needinfo?(Virtual)
that should have been "neat CSS animations" ;)
@ Albert Scheiner [:alberts] - Please reopen the new bug about your issue, as it can looks similar, but the cause could be different. In worst case, it will be duped to this old and kinda forsaken bug. ;)
Flags: needinfo?(Virtual)
See Also: → 1459381
Severity: normal → S3

The severity field for this bug is relatively low, S3. However, the bug has 11 votes.
:dholbert, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.

Flags: needinfo?(dholbert)

The last needinfo from me was triggered in error by recent activity on the bug. I'm clearing the needinfo since this is a very old bug and I don't know if it's still relevant.

Flags: needinfo?(dholbert)
I think, this is still relevant, just not sure, this is the place. System: HP EliteBook 840 G5 CPU: i7-8550U Graphics: Intel UHD Graphics 620, driver v30.0.101.1340 OS: Win 10 21H2 Firefox: 109.0 (64-bit), "Use recommended performance settings: yes" Chrome: Version 109.0.5414.75 (Official Build) (64-bit), "Use hardware acceleration when available: yes" Consider this html: <html> <head> </head> <body> <img src="bg_balloons_animated.svg" height="100%" width="100%"> </body> </html> I'll paste the svg in the bottom if this comment. Here're my observations: That HTML opened in Chrome takes 3-4% CPU. That HTML opened in FireFox takes 20-70% CPU (it think, it depends on the amount of balloons currently rendered and their speed) Opened just the SVG as a picture in the FireFox (no html!), takes about 3-5% CPU. here the SVG:

Please file a new bug.

I can reproduce a Chrome-vs-Firefox difference in CPU usage with Uwe's example -- I'll go ahead and file.

Filed bug 1812394 for Uwe's issue.

(In reply to Daniel Holbert [:dholbert] from comment #34)

Filed bug 1812394 for Uwe's issue.

Thanks, Daniel!

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: