1725367 - High GPU usage on Reddit with Enhanced Tracking Protection enabled

Status: UNCONFIRMED

(Core :: Graphics, defect)

Description

[sid]

Attachment: Firefox High GPU usage on Programming Reddit - ETP1 - 2021-08-12 213846.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

Open a Private window (add-ons disabled)
Browse to: https://www.reddit.com/r/programming/
Scroll maybe a down a little bit

Actual results:

The GPU usage jumps from 5% to 30% on a page with mostly static text

Expected results:

Don't see why the page should use so much GPU. There is no animation that I can see.

Notes:

• When I tested this, there is a post at around 6th position, which is a Tweet, which I think is causing the problem
• When Enhanced Tracking Protection is enabled Tweet doesn't load and GPU is 30%
• When Enhanced Tracking Protection is disabled Tweet does load and GPU is 7%
• I will try to attach screenshots of tests with and without Enhanced Tracking Protection

Comment 1

[sid]

Attachment: Firefox High GPU usage on Programming Reddit - ETP0 - 2021-08-12 213653.png

Screenshot with ETP disabled, which loads the Tweet and doesn't cause high GPU usage

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[sid]

Went back to the site and did some more investigation into this today.
Found that it is the following bit of CSS animation on the div around the Tweet that's causing the high GPU usage.
Will try to attach couple of more screenshots from today's testing.

.fzTkuBRFT8iIn1XnJX_Yn._34yMY7-6MNnz3utfjExvIq {
    animation: vnt666wwqSK5qL63sBn9P 1.5s ease infinite;
        animation-name: vnt666wwqSK5qL63sBn9P;
        animation-duration: 1.5s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
    background: linear-gradient(90deg,var(--newCommunityTheme-field),var(--newCommunityTheme-inactive),var(--newCommunityTheme-field));
    background-size: 200%;
}

Comment 4

[sid]

Attachment: Firefox High GPU usage on Programming Reddit - ETP1 - Animation0 - 2021-08-13 195500.png

Comment 5

[sid]

Attachment: Firefox High GPU usage on Programming Reddit - ETP1 - Animation1 - 2021-08-13 195512.png

Comment 6

[sid]

Attachment: Firefox High GPU usage on Programming Reddit - ETP1 - Element - 2021-08-13 200506.png

Comment 7

[Jeff Muizelaar [:jrmuizel]]

Is it possible to make a standalone test case that show the problem using the singlefile addon? https://addons.mozilla.org/en-CA/firefox/addon/single-file/

Comment 8

[sid]

Attachment: CentOS - Corporate-driven, Not suitable for Enterprise (8_10_2021 8_21_40 pm).zip

Attaching a single file example with the offending animation. I tried my best to include only the elements that I think are causing problems. Still the file is almost 500KB with the other stuff that's referenced in the Reddit page.

Comment 9

[Jeff Muizelaar [:jrmuizel]]

What GPU usage do you get in Chrome on the same standalone test case?

Comment 10

[sid]

Don't have Chrome on this machine but I do have Edge, which I presume is close enough for this test. Will attach new screenshots.

Firefox is about 6-8% (much lower than the 30% I was seeing when I logged the bug)
Edge is constant 4%

One change is that I'm on Windows 11 now.

Comment 11

[sid]

Attachment: Firefox GPU Usage 2021-10-14.png

Comment 12

[sid]

Attachment: Edge GPU Usage 2021-10-14.png