From 02a5da71aa64de14c2db16af5826f50d5890a289 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 14 Jul 2025 13:29:09 +0200 Subject: [PATCH] fix(material/tabs): glitchy animation in rtl with lazy-loaded content 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. --- src/material/tabs/tab-body.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/material/tabs/tab-body.scss b/src/material/tabs/tab-body.scss index 4a589ccc2ead..89db99c45976 100644 --- a/src/material/tabs/tab-body.scss +++ b/src/material/tabs/tab-body.scss @@ -35,6 +35,14 @@ visibility: visible; } + // Chrome appears to have a bug where the animation glitches in RTL if the element + // has a height of 0px which can happen with lazy-loaded content or when it's off-screen. + // See: https://github.com/angular/components/issues/31503. We can work around it by setting + // a minimum height on it. + .mat-tab-body-animating > & { + min-height: 1px; + } + .mat-mdc-tab-group-dynamic-height & { overflow: hidden; }