[cdk-virtual-scroll-viewport][mat-table] - sticky headers is not working properly when combining mat-table with cdk-virtual-scroll-viewport

[kriswinbush]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue https://stackblitz.com/edit/virtual-scroll-table-sticky-headers

Steps to reproduce:

1. wrap mat-table within a cdk-virtual-scroll-viewport element
2. add sticky: true property to *matHeaderRowDef directive as stated in documentation
3. observe sticky header slide down the viewport after about 10 rows.

Expected Behavior

Expect when adding the sticky:true; property to mat-table *matHeaderRowDef directive wrapped within a cdk-virtual-scroll-viewport that the headers remain positioned at the top of the viewport.

Actual Behavior

As you scroll the cdk-virtual-scroll-viewport slides the entire mat-table instead of just the row contents wrapped in the tbody element.

Environment

• Angular: >= 7
• CDK/Material: >= 7
• Browser(s): chrome, firefox, opera, safari
• Operating System (e.g. Windows, macOS, Ubuntu): all

[karimsacre]

Playing around in your stackblitz seems like it can be fixed by have a transform: translateY(-<>px); See screenshot below, when I update the .mat-header-row with a negative value in the translateY of the cdk-virtual-scroll-content-wrapper translateY element, the header seems to be correct.

[SteGriff]

I can't comment on why this bug happens as it seems to be a feature. For every few lines you scroll, the translate-y is increased. So for our use case, I added this CSS rule to fix it:

.cdk-virtual-scroll-content-wrapper
{
  transform: none !important;
}

Hope it helps.

[niteshkhanna1989]

found somewhat of a fix for the problem. 96 is just the rowheight * 2

const offset = this.cdkVirtualScrollViewport.measureScrollOffset('top');
this.cdkVirtualScrollViewport.scrollToOffset(offset - 96);
asapScheduler.schedule(() => this.cdkVirtualScrollViewport.scrollToOffset(offset), 1);