1112701 - CSS animations cause many wakeups in Diablo sub-reddit

Status: NEW

(Core :: Layout, defect)

Description

[Nathan Froyd [:froydnj]]

STR (I observe the same behavior on release and nightly):

1. Go to http://www.reddit.com/r/Diablo/comments/29kcd9/hellfire_amulets_detailed_guide_to_crafting, preferably in a new profile.

Observe that the cloud in the header is animating.

2. Open a terminal window and type the following command:

sudo powermetrics -W -s tasks |egrep -e firefox -e '^Name' -e 'Sampled system activity'

Leave this command running.

3. Observe the high number of wakeups.  On my machine, several hundred is normal, up to 1000+, depending on factors that I am currently ignorant of.

4. Open the Web Developer Inspector, and select the div containing the animating cloud.  It's called "header-bottom-left" here, a child of "header".  Mousing over the elements of the page should direct you to it fairly easily.

5. The Inspector has a little area in the bottom right of your window for displaying the CSS rules for the selected element.  Find the CSS rule for the animation, currently on the ::after element.

6. Click the little checkbox next to the animation to disable it from running.

7. Watch as the wakeups for firefox according to powermetrics drop to almost nothing (<10 on my machine).  If you had Activity Monitor open, you can observe the impact that flipping the animation off and on has on Energy Impact, too.

For comparison purposes, Safari can run this same page with the animation at about 50 wakeups.  I don't know what we're doing, but we can clearly be doing something better.

I don't know exactly where this goes; some sort of interaction between layout, graphics, and imagelib (?).  Jet, please refile and/or ask appropriate people about this.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

What CSS properties were being animated in the animation?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In particular, if it's properties that Safari can run on the compositor, then turning on OMT Animations on desktop might make a big difference here, assuming it's also something that we can run on the compositor.  If there's a big difference between main-thread-animation power use between Safari and Gecko, then that's a different can of worms.)

Comment 3

[Nathan Froyd [:froydnj]]

(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #1)
> What CSS properties were being animated in the animation?

I'm not entirely sure.  The @keyframes rules for the animation are only touching background-position; would there be others to look for as well?

Comment 4

[Nathan Froyd [:froydnj]]

mstange says this is all background-position.  He's not sure where all the wakeups are coming from either.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Do we have tools for debugging the cause of individual wakeups?

Comment 6

[Nathan Froyd [:froydnj]]

(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #5)
> Do we have tools for debugging the cause of individual wakeups?

I don't know yet.  I am going to poke at dtrace on Mac to see if that can tell me when the wakeups are.  CPU usage on my Mac is high enough that a good profiler *might* be helpful.

Comment 7

[Andrew McCreight [:mccr8]]

A user posted recently complaining about a similar page causing heavy CPU usage:
https://www.reddit.com/r/Diablo/comments/3rg8jb/meta_rdiablo_in_firefox_on_os_x_using_100_cpu/

Comment 8

[Wayne Mery (:wsmwk)]

Does this still happen?

Comment 9

[Jeff Fortin]

I think so, there is bug #1789153 for example but on the reddit thread mentioned there, there is also at least one comment that said,

Some subreddits also have animated custom CSS on them.

The animations always causes one CPU core to be at 100% utilization.