Skip to content

fix(material/tabs): glitchy animation in rtl with lazy-loaded content #31535

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.

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
Jul 16, 2025

Conversation

crisbeto
Copy link
Member

When the tabs have lazy-loaded content, their height can be zero to begin with. This appeared to hit a Chrome bug where animating the transform on a zero-height element in RTL was interrupting the animation.

These changes fix the bug by setting a minimum height.

Fixes #31503.

@crisbeto crisbeto requested a review from a team as a code owner July 14, 2025 08:36
@crisbeto crisbeto requested review from mmalerba and ok7sai and removed request for a team July 14, 2025 08:36
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Jul 14, 2025
When the tabs have lazy-loaded content, their height can be zero to begin with. This appeared to hit a Chrome bug where animating the `transform` on a zero-height element in RTL was interrupting the animation.

These changes fix the bug by setting a minimum height.

Fixes angular#31503.
@crisbeto crisbeto force-pushed the 31503/tabs-rtl-animation branch from d455d7b to 02a5da7 Compare July 14, 2025 11:29
@crisbeto crisbeto removed request for mmalerba and ok7sai July 16, 2025 06:58
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Jul 16, 2025
@crisbeto crisbeto merged commit 892c281 into angular:main Jul 16, 2025
23 of 25 checks passed
crisbeto added a commit that referenced this pull request Jul 16, 2025
…#31535)

When the tabs have lazy-loaded content, their height can be zero to begin with. This appeared to hit a Chrome bug where animating the `transform` on a zero-height element in RTL was interrupting the animation.

These changes fix the bug by setting a minimum height.

Fixes #31503.

(cherry picked from commit 892c281)
@crisbeto
Copy link
Member Author

The changes were merged into the following branches: main, 20.1.x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/tabs target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(tabs): Tab group with lazy loaded content (matTabContent) - weird/blinking/buggy animation in RTL
2 participants