angular / angular/components

bug(table): Sticky header flickering

Open
#21,576 12 comments 5 reactions 0 assignees View on GitHub
area: material/table P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

Sticky header works with flickering with infinity scroll especially if scroll opposite direction. This is well-known issue for a couple of years, that appeared in some topics but still has no special topic.

#### Reproduction
https://user-images.githubusercontent.com/2244675/104481026-54436f80-55d6-11eb-8454-3eccc67c34a7.mov

E.g. with old version of Angular, but the same with last one. Also there are a lot of examples here https://github.com/angular/components/issues/10122#issuecomment-754283238 or in other issues where the effect appeared
https://stackblitz.com/edit/mat-table-virtual-scroll-div

- Angular: v10, v11
- CDK/Material: v10, v11
- Browser(s): Chrome, Firefox, Safari, Edge
- Operating System: Windows, macOS, Ubuntu

Contributor guide

Open the contributing guide

Research direction

Start by running the linked StackBlitz reproduction and comparing its behavior with the attached video and examples in Angular issue #10122. Investigate the table's sticky-header and virtual/infinite-scroll behavior across the listed browsers; done means scrolling in both directions without header flickering.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.