1905546 - High GPU Usage on Old Reddit Subreddits using Themes with transparency (Hector Big Picture) on iGPU

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Chobits1717]

Attachment: BionicleScroll.png

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

Steps to reproduce:

Any subreddit using Hector Big Picture (a subreddit theme that utilizes translucency effects) results in high GPU usage while scrolling. Scrolling feels like its at 30fps (when it should be smooth and silky). GPU usage is between 30-60% with 25 posts on screen, 50-90% with 100 on screen. Testing in Edge it only goes up to 10-30% GPU usage when scrolling even with 100 posts on screen. GPU usage/scrolling is smoother when viewing a post or using the search function, as they only use one big translucent box.

To reproduce, use a computer running on an iGPU (preferably a laptop), log into reddit, make sure to opt out of the redesign in your settings, then visit a subreddit using these translucency effects. r/Rayman and r/BionicleLego are good examples. Scroll up and down the page with task manager open on the side.

Profile with logging using Graphics preset:
https://share.firefox.dev/3xF4Xbl

Actual results:

High GPU usage, resulting in a "lower framerate" when scrolling.

Expected results:

A Gen 13 iGPU (Iris XE G7) should be more than capable of handling some simple translucent boxes on a webpage, and should have smooth scrolling.

Comment 1

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

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

Comment 2

[Timothy Nikkel (:tnikkel)]

Looking at https://old.reddit.com/r/bioniclelego/ the translucency effect seems to be implemented by the page having a blurred copy of the background, it taks that on to each box, and then marks it as background attachment fixed. Clever approach.

Comment 3

[Chobits1717]

(In reply to Timothy Nikkel (:tnikkel) from comment #2)

Looking at https://old.reddit.com/r/bioniclelego/ the translucency effect seems to be implemented by the page having a blurred copy of the background, it taks that on to each box, and then marks it as background attachment fixed. Clever approach.

Its very clever, but why does it gobble up so much more of the GPU (and have decreased performance) in just Firefox? Is this a bug?

Comment 4

[Chobits1717]

Any updates on this? Still occurs in 129