Open Bug 1788852 Opened 2 years ago Updated 2 years ago

When scrolling the timetable, the name of programs in the timetable moves up/down

Categories

(Core :: Layout: Scrolling and Overflow, defect, P3)

Desktop
Windows 10
defect

Tracking

()

Tracking Status
firefox106 --- affected

People

(Reporter: alice0775, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: nightly-community, parity-chrome)

Attachments

(1 file)

Attached image screenshot (deleted) —

Steps to reproduce:

  1. Open https://radiko.jp/#!/live/ALPHA-STATION
    (This website has regional(IP address) restrictions)
  2. Scroll down to 週間番組表(timetable)
  3. Try scroll the timetable

Actual Results:
the name of programs moves up/down

Expected Results:
The program name should be stuck

(In reply to Alice0775 White from comment #0)

Steps to reproduce:

  1. Open https://radiko.jp/#!/live/ALPHA-STATION
    (This website has regional(IP address) restrictions)
  2. Scroll down to 週間番組表(timetable)
  3. Try scroll the timetable

Thanks for the bug and the steps to repro!

Actual Results:
the name of programs moves up/down

Expected Results:
The program name should be stuck

I was able to scroll the timetable and the program names do jitter a bit. I tested in Chrome and Safari and the same behavior is seen there. Do you see the same behavior in other browsers, or am I not understanding the expected results?

Flags: needinfo?(alice0775)

Screen recording:

Nightly106.0a1:
https://youtu.be/4oPiVgDS8_U
The program name scrolls with the table while scrolling, and then back to the expected position at the top.

Chrome: https://youtu.be/DMhBn6eRcx0
The program name sticks to the top while scrolling.

Flags: needinfo?(alice0775)

This seems to be a case of a site using a scroll-linked effect implemented in Javascript to simulate position: sticky.

This is known to cause problems, as discussed at https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html. (We even print a warning to the devtools console about this, linking to that page.)

We make a best-effort attempt to keep scroll-linked effects in sync, but our asynchronous scrolling architecture means we can't guarantee this without sacrificing responsiveness. We've made some recent improvements in this area in bug 1571758, and we can keep this bug on file, blocking bug 1367770, to track potential further performance improvements.

However, the preferred resolution would be for the site to switch to a declarative (non-Javascript) implementation of the effect, in this case likely using position: sticky.

Blocks: 1367770
Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: