bug(tab): overlap the previous tab body content

[Nishfdo]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-jpeybu?file=src%2Fapp%2Ftab-group-dynamic-height-example.html

Steps to reproduce:

1. Change the animationDuration from 500ms to 5000ms

Expected Behavior

Navigate from one tab to the next tab without overlapping the previous tab body with animation. In this scenario, I am using just two tabs.

Actual Behavior

Overlapping the previous tab content in tab transition

Demo

Notes:

Lazily load the tab contend by wrapping the tab content in <ng-template matTabContent> did not help to resolve this issue either.

Environment

• Angular: 9.1.1
• CDK/Material: 9.2.4
• Browser(s): Chrome (Version 83.0.4103.61 (64-bit)), Firefox (77.0 (64-bit))
• Windows Operating System: Win10 (x64-bit)

[jelbourn]

Confirmed that this happens once the animation duration exceeds 4000ms

[Nishfdo]

Thank you for looking into this Jeremy!

It does not look like that this behavior due to animationDuration. Of course, having larger animationDuration helps to visualize the issue. According to my observation, we can reproduce this with even lower animationDuration.

In our case, we are using mat-tab with mat-menu. Take a look following StackBlitz where it is easy to see:
https://stackblitz.com/edit/angular-74cqem-svc5gp?file=src%2Fapp%2Ftab-group-dynamic-height-example.html

Steps to reproduce:

1. Click on the Menu

2. Click on the Menu again to collapse the menu ( initially, it gets initialize the state closing the menu allows to reproduce this behavior)

3. Click on the Menu again

4. Navigate to tab other than already selected

Demo

[jelbourn]

Yeah, that's certainly unexpected.