Skip to content

bug(mat-tabs): Flickering on tab content change with no animation #30964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task done
niku45 opened this issue Apr 27, 2025 · 0 comments · Fixed by #30966
Closed
1 task done

bug(mat-tabs): Flickering on tab content change with no animation #30964

niku45 opened this issue Apr 27, 2025 · 0 comments · Fixed by #30966
Assignees
@crisbeto
Labels
area: material/tabs P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@niku45
Copy link

niku45 commented Apr 27, 2025 •
edited
Loading

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

Angular Material 18

Description

There is a flickering issue when switching between tabs using Angular Material's mat-tab component in Angular 19+ versions.

Reproduction

  1. Create a new Angular 19+ project with Angular Material installed.
  2. Add Angular Material Tabs component to the app (use the mat-tab-group and mat-tab elements).
  3. Use multiple tabs in the tab group.
  4. Disable mat-tab-group animationDuration
  5. Switch between tabs.
  6. Observe that there is a flickering effect when switching between tabs.

Expected Behavior

The tabs should switch smoothly without any flickering when changing between tabs, like it did on previous angular version such as 18 or lower.

Actual Behavior

When switching between Angular Material tabs in Angular 19+, the content area flickers with a noticeable white flash.

Environment

  • Angular: 19+
  • CDK/Material:19+
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
@niku45 niku45 added the needs triage This issue needs to be triaged by the team label Apr 27, 2025
@crisbeto crisbeto self-assigned this Apr 28, 2025
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/tabs and removed needs triage This issue needs to be triaged by the team labels Apr 28, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 28, 2025
@crisbeto
fix(material/tabs): flicker when animationDuration is set to zero
0be0e43 
The tabs have a fallback that sets `transition-delay: 1ms` in case users disabled animations without going through one of our APIs. That was also applying when they set `animationDuration="0"` which is a supported API. The result was a slight flicker.

These changes resolve the flicker by treating `animationDuration="0"` in the same way as if animations were disabled globally.

Fixes angular#30964.
@crisbeto crisbeto mentioned this issue Apr 28, 2025
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 28, 2025
@crisbeto
fix(material/tabs): flicker when animationDuration is set to zero (an…
904f603 
…gular#30966)

The tabs have a fallback that sets `transition-delay: 1ms` in case users disabled animations without going through one of our APIs. That was also applying when they set `animationDuration="0"` which is a supported API. The result was a slight flicker.

These changes resolve the flicker by treating `animationDuration="0"` in the same way as if animations were disabled globally.

Fixes angular#30964.
@crisbeto crisbeto mentioned this issue Apr 28, 2025
Merged
crisbeto added a commit that referenced this issue Apr 28, 2025
@crisbeto
fix(material/tabs): flicker when animationDuration is set to zero (#3…
9a8d136 
…0966) (#30968)

The tabs have a fallback that sets `transition-delay: 1ms` in case users disabled animations without going through one of our APIs. That was also applying when they set `animationDuration="0"` which is a supported API. The result was a slight flicker.

These changes resolve the flicker by treating `animationDuration="0"` in the same way as if animations were disabled globally.

Fixes #30964.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: material/tabs P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/tabs): flicker when animationDuration is set to zero crisbeto/material2
2 participants
@crisbeto @niku45