bug(table): Sticky header flickering
- 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
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