Tumblr Dashboard takes up a lot of CPU

RESOLVED WORKSFORME

Status

()

Core
Graphics
P3
normal
RESOLVED WORKSFORME
a year ago
a year ago

People

(Reporter: Asif Youssuff, Unassigned)

Tracking

56 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

(Reporter)

Description

a year ago
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

a year ago
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
Component: Untriaged → Graphics
Product: Firefox → Core
This was possibly fixed on Tumblr's side, since we can no longer reproduce this. Can you still reproduce this?
Flags: needinfo?(yoasif)
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.
(Reporter)

Comment 4

a year ago
I also think it is fixed.
Flags: needinfo?(yoasif)

Updated

a year ago
Whiteboard: [gfx-noted]
Alright, closing this as WFM for now based on comment 3 and comment 4.
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.