1460032 - Twitch box art images flicker when scrolling m.twitch.tv on desktop

Status: NEW

(Core :: Graphics, defect, P3)

Description

[Chris Peterson [:cpeterson]]

STR:
1. Load https://m.twitch.tv/
2. Slowly scroll down the page.

RESULT:
As each row of box art images scrolls into view, all the images on the page flicker as the high-res images are loaded.

This is not a new problem. I can reproduce the flickering in Firefox builds as old as 55 on both Windows and macOS. The images don't flicker in Chrome, Edge, or IE11 on Windows or Chrome or Safari on macOS, so this problem is unique to Firefox.

Comment 1

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

As noted in the original bug, I expect this is in part caused by the recreation of the DOM elements and us getting a paint in before the images have loaded in the new element.

Comment 2

[Stefan [:StefanG_QA]]

This is reproducible on Android device (Note 9) with today's Nightly build (01-16-2019).

Comment 3

[Adam Stevenson [:adamopenweb]]

Still reproduces in Fennec and Fenix.

Comment 4

[Jessie [:jbonisteel] pls NI]

Hey Jamie - curious if this gets better when we enable WR? Just wondering if WR makes a positive impact here.

Comment 5

[Adam Stevenson [:adamopenweb]]

Jessie - On a Pixel 2 in Fenix & Fenix Nightly, it's much worse of a problem. Right after scrolling the first bit, the page starts automatically scrolling quickly and loading all the title images uncontrollably.

Fennec is still showing the same issue as reported.

Comment 6

[Jamie Nicol [:jnicol]]

The scrolling issue is a scroll anchoring bug. Setting layout.css.scroll-anchoring=false fixes it. cc Emilio (sorry!) - Is there a metabug we should file a bug and block against?

I can indeed reproduce the original issue in Fennec, but not in Fenix or Fenix nightly. It looks like it could be to do with the image cache being purged - Andrew, has the cache limit changed post-68?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Hmm, is it? That's a bit surprising, but I guess it may make sense.

Is there any chance of doing a proper bisect? Looking at the JS code in the page, it does a bunch of stuff off scroll event listeners, which with scroll anchoring may trigger other scroll events.

Bug 1561450 comes to mind as something that could've fixed this as well.

Comment 8

[Jamie Nicol [:jnicol]]

To clarify, the flickering that this bug was originally about is fixed in current Fenix. The scrolling issue is still present (and I think we should file a separate bug about it).

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Ah, gotcha, hadn't seen comment 5. I filed bug 1586909 about the scrolling issue in particular.

Comment 10

[Jamie Nicol [:jnicol]]

Thanks Emilio!

I actually take back what I said in comment 6 and 8 about it being fixed in Fenix - I had webrender enabled. It does indeed seem to be fixed by webrender, but I can still reproduce with webrender disabled.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

The scrolling issue should be fixed, fwiw.