[Tabs] Scrollbar shows on tab changes
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
_No response_
### Description
This was discussed previously in #6104
Last comment was:
Confirmed that there is no scrollbar during animation in v15: https://stackblitz.com/edit/angular-shzd6r-pwokjj (tested on Chrome w/ MacOS) - @mmalerba
However using the [stackblitz example](https://stackblitz.com/edit/angular-shzd6r-pwokjj) in Google Chrome, shows the scrollbar each time you tab from Title 1 to Title 2.
Using dynamicHeight on mat-tab-group still works as a workaround.
### Reproduction
StackBlitz link: [Link](https://stackblitz.com/edit/stackblitz-starters-dk71gk?file=src%2Fmain.ts)
Steps to reproduce:
1. switch tabs
### Expected Behavior
No scrollbar
### Actual Behavior
Scrollbar flashes for a short moment
### Environment
- Angular: 16.1.2
- CDK/Material: 16.1.2
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Contributor guide
Research direction
Start with the linked StackBlitz reproduction at src/main.ts and reproduce the issue in Google Chrome by switching tabs. Compare the expected behavior of no scrollbar with the brief scrollbar flash, and use the reproduction to identify the Angular Material tab behavior involved. Done means switching tabs no longer shows a scrollbar momentarily without relying on dynamicHeight.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100