1379024 - Tumblr Dashboard takes up a lot of CPU

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect, P3)

Description

[Asif Youssuff]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170706130309

Steps to reproduce:

Reporting this issue based on this reddit thread: https://www.reddit.com/r/firefox/comments/6llian/tumblr_high_cpu_problempower_virus_has_been/?st=j4t29q2e&sh=c3e2a1bb and referencing: http://codeman38.tumblr.com/post/162380885458/codeman38-omg-ive-been-noticing-that

1. Create Tumblr login (https://www.tumblr.com)
2. Login
3. Navigate to https://www.tumblr.com/dashboard
4. Wait for page to "settle"
5. Capture profile: https://perfht.ml/2uPNmaz


Actual results:

I have a fairly fast machine, so while I didn't see the heights of the CPU use seen by users in the reddit thread and on Tumblr, I did notice some increase in CPU temp.

I captured a Gecko performance profile in the hopes that it might be helpful to dig into it. This may not be a real issue, but given that there seems to be some anecdotal evidence that this is an issue, it feels like it's worth looking into. 

Users report that using Sylus to inject:

@-moz-document domain(tumblr.com) {
    .logo .preload-container:not(:hover) {
        animation: none;
    }
}

resolves the issue.


Expected results:

No noticeable increase in CPU use. Additionally, since the animation in question here happens offscreen (isn't actually visible), Firefox shouldn't waste CPU cycles animating it.

Comment 1

[Abe - QA (:Abe_LV)]

We have the profile report. It looks graphics related. Feel free to put in another component if 'core-graphics' is not the right component. Thanks

Comment 2

[Mike Conley (:mconley) (:⚙️)]

This was possibly fixed on Tumblr's side, since we can no longer reproduce this. Can you still reproduce this?

Comment 3

[Markus Stange [:mstange]]

I looked at the CSS code at https://assets.tumblr.com/client/prod/app/global.build.css?_v=2861375087fa5ceb852ab4349928e8eb, and the two CSS rules that I could find that set the animation "play" or "pridelogo" contain :hover in their selectors:
> .logo:hover .opacity-switch .preload-container{opacity:1;animation:play 1.4s steps(48) infinite}
> .logo:hover .opacity-switch .preload-container.pride-logo{animation:pridelogo 1.4s steps(79) infinite}

So I think this has indeed been fixed by Tumblr.

Comment 4

[Asif Youssuff]

I also think it is fixed.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

Alright, closing this as WFM for now based on comment 3 and comment 4.