Skip to content

Commit d455d7b

Browse files
committed
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.
1 parent ad4d5b4 commit d455d7b

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

src/material/tabs/tab-body.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@
3030
transform: none;
3131
visibility: hidden;
3232

33+
// Chrome appears to have a bug where the animation glitches in RTL if the element
34+
// has a height of 0px which can happen with lazy-loaded content or when it's off-screen.
35+
// See: https://github.com/angular/components/issues/31503. We can work around it by setting
36+
// a minimum height on it.
37+
min-height: 1px;
38+
3339
.mat-tab-body-animating > &,
3440
.mat-mdc-tab-body-active > & {
3541
visibility: visible;

0 commit comments

Comments
 (0)