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

[anisabboud]

Description

LTR (smooth animation)

RTL (buggy animation): First -> Second -> Third

Reproduction

1. Go to https://ng-comp-devapp.web.app/tabs
2. Scroll down to the "Tab group with lazy loaded content"
3. Switch tabs: First -> Second -> Third (works fine in LTR)
4. Switch to RTL and scroll down to the same example "Tab group with lazy loaded content"
5. Switch tabs: First -> Second -> Third => There's weird blinking in the RTL animation.
   (Other tab types work well with RTL. Only the one with <ng-template matTabContent> is buggy.)

Expected Behavior

RTL animation should slide smoothly like LTR animation when using lazy loaded tabs <ng-template matTabContent>.

Actual Behavior

RTL animation is buggy/blinking when using lazy loaded tabs <ng-template matTabContent>.

Environment

• Angular: 20.0.5
• CDK/Material: 20.0.5
• Browser(s): Chrome

[anisabboud]

Setting --mat-tab-animation-duration: 5000ms; shows the issue more severely in slow motion:

2025-07-09.RTL.slow.motion.mp4

[andrewseguin]

Thanks for the detailed report, @anisabboud! We've reproduced the issue and can confirm that it's a valid bug. We'll keep it as a P2 for now and will update this thread when we have more information.