bug(cdkTable & mat-table): virtual scrolling shifting issues introduced in 21.1

[rdneagu]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

21.0.0

Description

In version v20.0.0 we had used a custom virtual scrolling strategy to allow tables with sticky headers. Upgrade to 21.0.0 broke the custom scrolling strategy implementation we have used so we decided to look for alternatives. Luckily, It seems that 21.0 also introduced support for tables with sticky header (or was introduced earlier, I am actually not sure which version added support), unfortunately, version 21.1 seems to introduce a bug which makes the scrolling shift around.

The bug can be seen in the example provided in the Table documentation as well. The documentation is still running on 21.0.0 but if you upgrade the example to 21.1.1, you can start seeing the buggy behavior when scrolling.

Scrolling seems to be fixed when itemSize is set to 0, however, in infinite scrolling implementations using DataSource that rely on collectionViewer.onViewChange range.end, it will continuously fetch the next page since range.end will always be the max value (3rd stackblitz link in the reproduction links has an async implementation mocked example that can be tested if uncommented in table-virtual-scroll-example.component.ts in constructor)

Example provided is on mat-table but cdkTable's behavior is the same if not worse

Reproduction

StackBlitz link:
v21.0 (original example on version 21.0): https://stackblitz.com/edit/dfp4dgn5?file=src%2Fexample%2Ftable-virtual-scroll-example.ts&startScript=start
v21.1.1 (original example but on version 21.1.1): https://stackblitz.com/edit/6wi4nsxd?file=src%2Fexample%2Ftable-virtual-scroll-example.ts&startScript=start
v21.1.1 with DataSource: https://stackblitz.com/edit/gt9emjwr?file=src%2Fexample%2Ftable-virtual-scroll-example.ts (much more noticeable in this example)

Steps to reproduce:

1. Scroll around using the scroll wheel (also happens when you drag around the scrollbar thumb especially visible in tables with small amount of rows)
2. 3rd link has an infinite scrolling implementation that can be tested if uncommented in table-virtual-scroll-example.component.ts's constructor

Expected Behavior

The table should scroll correctly without shifting around

Actual Behavior

Scrolling shifts around, some cases making it impossible to even scroll back up once you go all the way down and some cases scrolls upwards when scrolling down

Environment

• Angular: 21.1.1
• CDK/Material: 21.1.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows & macOS

[crisbeto]

Can you post a recording of what the shifting looks like? I didn't notice any in the Stackblitz examples you linked.

[crisbeto]

Hmm interesting, I managed to reproduce some sort of jumping if I resize the screen. Does this happen for you after a resize or also on load?

[rdneagu]

My apologies, the example had itemSize 0, try again now with the correct itemSize = 52. For a second I thought I started hallucinating cause I couldn't reproduce it anymore. Changed the amount of items to 100 as well since it's more noticeable

Here's the video:

chrome_hBN92Vlsy4.mp4

[rdneagu]

At some point you can't even scroll upwards anymore, even if you drag the thumb:

chrome_04Pay0kz9U.mp4

[crisbeto]

In your third link I was able to reproduce it consistently by clicking on the scrollbar a few times and then trying to drag it. I did notice that it has itemSize="46", if I change it to 52, I can't reproduce it anymore. Here's a fork where the only change I made was the itemSize: https://stackblitz.com/edit/gt9emjwr-jns2wakq?file=src%2Fexample%2Ftable-virtual-scroll-example.html

[rdneagu]

I have just booted up your updated fork and this is how it looks like using Chrome on a Mac this time, can try on Windows machine later.

https://drive.google.com/file/d/1tigTgQ5Wsj7pjxtltQFphAAIPq1bbyON/view?usp=sharing

In the video I tried scrolling:

• Using the touchpad
• By clicking on the track to move the thumb
• Moving the thumb itself

[crisbeto]

This is really odd... It looks like you're literally just opening the link and starting to scroll and it shows up. I've tried doing the same and I couldn't reproduce it.

[rdneagu]

It seems that it works just fine when you slowly scroll downwards. The moment you ramp up the scrolling speed or click on the trackbar/drag it around, it starts misbehaving which becomes progressively worse. However, it seems that scrolling upwards from the end, even slowly, always triggers it at some point.

https://drive.google.com/file/d/1PzYzmmcXXuIcaIdrHrHR-IUWkYr3RH_C/view?usp=sharing

edit: Your forked version works perfectly fine on version 21.0.0 (same device, same browser)
https://stackblitz.com/edit/gt9emjwr-cue8qggn?file=src%2Fexample%2Ftable-virtual-scroll-example.ts

[majid-iqbal-bw]

In your third link I was able to reproduce it consistently by clicking on the scrollbar a few times and then trying to drag it. I did notice that it has itemSize="46", if I change it to 52, I can't reproduce it anymore. Here's a fork where the only change I made was the itemSize: https://stackblitz.com/edit/gt9emjwr-jns2wakq?file=src%2Fexample%2Ftable-virtual-scroll-example.html

I can still see glitches with this updated example.

Screencast.From.2026-01-29.11-39-37.mp4