1614105 - Transitions between background images are janky on https://www.nrk.no/chasing-climate-change-1.14859595

Status: RESOLVED WORKSFORME

(Core :: Graphics: WebRender, defect, P3)

Description

[Markus Stange [:mstange]]

Attachment: Screen Shot 2020-02-07 at 11.18.59 PM.png

Steps to reproduce:

1. Go to https://www.nrk.no/chasing-climate-change-1.14859595
2. Scroll down and up between the first three background images.

Expected results:
The fading between the images should happen smoothly.

Actual results:
Whenever one background is replaced with another, the animation is very janky. The profiler overlay shows GPU times of 30ms and more.

Comment 1

[Markus Stange [:mstange]]

Attachment: Screen Shot 2020-02-07 at 11.19.30 PM.png

Comment 2

[Markus Stange [:mstange]]

Attachment: Screen Shot 2020-02-07 at 11.20.09 PM.png

Comment 3

[Markus Stange [:mstange]]

Attachment: Trace of GPU usage in Firefox (35ms+ per frame)

Comment 4

[Markus Stange [:mstange]]

Attachment: Trace of GPU usage in Safari (15ms per frame)

In Safari, the opacity is applied by the window server, which takes 15ms to render a frame.

Comment 5

[Andrew Osmond [:aosmond] (he/him)]

It is pretty bad on Linux too. The background image blinks in and out of view several times before stabilizing, and visibly slows down the rest of my computer.

Comment 6

[Glenn Watson [:gw]]

This seems to work well for me now - Markus, still an issue on your machine?

Comment 7

[Markus Stange [:mstange]]

Attachment: Screen Shot 2023-06-05 at 8.38.27 PM.png

Finally got a chance to re-test this with the machine that I was using when I filed this bug.

It looks like things are indeed better. The GPU times have dropped from 30ms to 15ms. This is probably good enough.