Skip to content

fix(material/tabs): flicker when animationDuration is set to zero #30966

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

Merged
merged 1 commit into from
Apr 28, 2025
+11 −4
Merged

fix(material/tabs): flicker when animationDuration is set to zero #30966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion goldens/material/tabs/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ export class MatTabGroup implements AfterViewInit, AfterContentInit, AfterConten
get animationDuration(): string;
set animationDuration(value: string | number);
// (undocumented)
_animationsDisabled: boolean;
protected _animationsDisabled(): boolean;
ariaLabel: string;
ariaLabelledby: string;
// @deprecated
Expand Down
2 changes: 1 addition & 1 deletion src/material/tabs/tab-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@

<div
class="mat-mdc-tab-body-wrapper"
[class._mat-animation-noopable]="_animationsDisabled"
[class._mat-animation-noopable]="_animationsDisabled()"
#tabBodyWrapper>
@for (tab of _tabs; track tab;) {
<mat-tab-body role="tabpanel"
Expand Down
11 changes: 9 additions & 2 deletions src/material/tabs/tab-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,7 @@ export class MatTabGroup
private _tabsSubscription = Subscription.EMPTY;
private _tabLabelSubscription = Subscription.EMPTY;
private _tabBodySubscription = Subscription.EMPTY;

_animationsDisabled = _animationsDisabled();
private _diAnimationsDisabled = _animationsDisabled();

/**
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
Expand Down Expand Up @@ -577,6 +576,14 @@ export class MatTabGroup
this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex));
}
}

protected _animationsDisabled(): boolean {
return (
this._diAnimationsDisabled ||
this.animationDuration === '0' ||
this.animationDuration === '0ms'
);
}
}

/** A simple change event emitted on focus or selection changes. */
Expand Down
Loading