fix(material/tabs): glitchy animation in rtl with lazy-loaded content (#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)

Author: crisbeto

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;
   }