2043936 - fifa world cup website header flickers as you scroll

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Visit this URL in Firefox on Android:
   https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/scores-fixtures?country=US&wtw-filter=ALL
   (This was linked from a world cup widget that appeared on my Firefox for Android new tab homescreen)
2. Dismiss the cookie popup if you get one (I tapped Reject All)
3. Scroll down so that the "scores and fixtures" section is entirely off the top of the screen. Ensure that Firefox's dynamic toolbar has been hidden.
4. Slowly scroll back up and see what happens as the dynamic toolbar slowly reappears.
5. Repeat steps 3-4.

ACTUAL RESULTS:
As you scroll upwards (bringing the dynamic toolbar back on screen), the "scores and fixtures" section (now a fixed header) flickers repeatly - it starts to animate into view and then disappears and then starts to animate into view again, etc.

EXPECTED RESULTS:
No such flickering. When I'm scrolling upwards, the "scores and fixtures" section should stay on screen as long as I continue scrolling upwards.

Chrome gives EXPECTED RESULTS.
Firefox Nightly 153.0a1 and release 151.0.2 give me ACTUAL RESULTS.

I'm using a Pixel 10 Pro XL with Android 16.

I think we've seen a version of this same issue on other sites, but it's notable that it affects the world cup page that we link to from our new tab page.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast

Comment 2

[Daniel Holbert [:dholbert]]

Hiro or botond, do you know if this flickering is a known bug?

(Side note, the Bugzilla embedded screencast in comment 1 renders horizontally and vertically flipped in Nightly on my phone; that seems to be a regression, and I'll file a separate bug on that later on)

Comment 3

[Daniel Holbert [:dholbert]]

Sorry, meant to cc/needinfo. :) see comment 2

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Okay, as far as I tested, I can't see the flicker at all.

That's being said, I guess what the site does is

1. when the content is scrolling down, the site shows the header with an slide-in animation
2. when the content is scrolling up, the site dismiss the header immediately

And then with the dynamic toolbar at the top, even if the user tries to scroll up or down on the screen, there's a span where the content's scroll offset is unchanged, rather the dynamic toolbar is just moving, and during the span some unexpected scroll offset change are observed in the content via scroll event listener or some such, and then it causes the flicker.

If my hypothesis is correct, bug 1989979 should fix the flicker.

Comment 5

[Daniel Holbert [:dholbert]]

Hmm, is that the right bug? It looks like that one and its dependencies are closed.

Or is there a pending pref-flip that's not tracked in that meta bug?

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Oops, I wasn't aware of the compositor scroll delegate has been used by default?

Daniel, can you please check the option named "Animate dynamic toolbars based on website scroll data" is on? On my end, it's on, I am not sure it's default or not. You can see the option in the secret settings menu enabled by tapping the Firefox log 5 times in the "About Firefox" in settings.

If it's on, then we need to fix bug 1921331 to avoid the flicker.

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

Okay, as far as I tested, I can't see the flicker at all.

I maybe chose the wrong word with "flicker"; really just that the animation repeatedly resets as I scroll.

This is quite easy to reproduce on my end (on a Pixel 10 Pro XL and a Pixel 6a), FWIW, just by scrolling slowly downwards/upwards on the page.

And then with the dynamic toolbar at the top,

You're right, this only happens with dynamic toolbar at the top. I just tested with it moved to the bottom and I'm unable to repro under that configuration.

Daniel, can you please check the option named "Animate dynamic toolbars based on website scroll data" is on? On my end, it's on, I am not sure it's default or not

It's off by default (and it was off for me).

But I don't think it's involved -- if I turn it on (and restart Firefox for good measure), I can still reproduce the bug just as easily.

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)

(Side note, the Bugzilla embedded screencast in comment 1 renders horizontally and vertically flipped in Nightly on my phone; that seems to be a regression, and I'll file a separate bug on that later on)

(This^ is bug 2043593 -- off-topic for this bug, but just mentioning it since I noticed it when viewing this bug page on my phone.)

Comment 9

[Botond Ballo [:botond]]

(In reply to Daniel Holbert [:dholbert] from comment #7)

Daniel, can you please check the option named "Animate dynamic toolbars based on website scroll data" is on? On my end, it's on, I am not sure it's default or not

It's off by default (and it was off for me).

But I don't think it's involved -- if I turn it on (and restart Firefox for good measure), I can still reproduce the bug just as easily.

I think that means this bug will not be fixed by bug 1921331, and still needs diagnosis.

Comment 10

[Hiroyuki Ikezoe (:hiro)]

I am still hoping the overlap model toolbar (bug 1921331) will fix this.

I dumped window.scrollY values in a scroll event listener while I was scrolling up and then down once. The values are:

  14211 
  14215 
  14229 
  14228.5 <- A decreased value, seems starting scroll down
  14231   <- But the maximum scroll offset is here
  14229.5 
  14228 
  14222.5 
  14225 
  14228 <- An increased value 
  14214 
  14222 
  14221.5 
  14210 

As you can see there are odd up and down values.

While the current top toolbar is moving, the root content scroll range is also being changed, thus this wonky scroll offsets can be observed.

That's being said, there may be something we can do in APZ not to cause this wonky offsets.