angular / angular/components

bug(material/tabs): tab body height animation is broken

Open
#31,629 4 comments 0 reactions 0 assignees View on GitHub
area: material/tabs P2 regression
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

You can even see this behaviour in the tab example in the docs https://material.angular.dev/components/tabs/examples
scroll down to the "Tab group that keeps its content inside the DOM when it's off-screen." example
it instantly hides the first tab content when u click the second, instead of waiting for the animation to complete, leading to a glitchy stutter

### Reproduction

look at angular material's own docs ^

### Expected Behavior

it should keep the content showing until the animation is completely done

### Actual Behavior

it glitches and hides instantly

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem in the Angular Material docs' "Tab group that keeps its content inside the DOM when it's off-screen" example. Start by tracing the tab body height animation and content visibility behavior when switching tabs. Done means the previous tab content remains visible until its animation finishes, without the reported stutter.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.