1640863 - Scroll anchoring is not working when table has sticky header

Status: NEW

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

Description

[Szabo Tamas]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Steps to reproduce:

I created a minimalist codepen to imitate the webapp on which I noticed the bug. It displays data in a table with sticky header that lazy loads new elements if we scroll to the bottom (and removes elements from the front).

It works fine for 1 or 2 paging, then the scroll anchoring doesn't work.

1. Open this pen: https://codepen.io/szt3/pen/rNOodeM
2. Scroll to the bottom
3. Click "page"
4. Repeat steps 2 and 3 until the 14th item is visible
5. Click "page"

Actual results:

5. Items are loaded, but the the container scrolls to the bottom

Expected results:

5. items are loaded and the scroll position stays as is.

Notice: It works then the table header isn't sticky

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Hmm, does it reproduce for you on Nightly? Your codepen seems to be working for me, so I wonder what's the difference in our setup.

Comment 2

[Szabo Tamas]

I just installed the latest Nightly (78.0a1 (2020-05-26) (64-bit)), and it is reproducible. Btw I use win 10.
video: https://streamable.com/y64wu6

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Cool, thanks for the recording, I see... FWIW, I think relying on scroll anchoring is generally bad practice (if only, it's not supported in WebKit browsers). It's intended as a UX improvement, but if you can restore the scroll position properly yourself it's always better.

Comment 4

[Szabo Tamas]

Thanks for confirming the bug.
Btw it is working on the latest Chrome and Edge.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Sure, well, they're effectively the same engine so it's not surprising :)