search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.1k stars 6.66k forks source link

bug(MatTabs): Inkbar has incorrect position and flickers inside MatDialog #19619

Closed twjacobsen closed 1 week ago

twjacobsen commented 3 years ago

Reproduction

I have not been able to reproduce this in a stackblitz, so I hope that some screenshots are enough.

When the content of the tabs is wider than the tabs, the ink bar is off and flickers when animating from one tab to another. Calling realigInkBar from the debugger realigns, but I haven't found a place in my code where I can get that effect. And it would not remove the flickering. The flickering appears as if the ink bar animates to the correct position, but then gets readjusted to be off.

image

When the number of tabs overflows the width of the content (ie. pagination shows), there's no flicker and the ink bar is positioned correctly.

image

Environment

twjacobsen commented 3 years ago

A little more details: I appears that the ink bar is only badly positioned when the mat-align-tabs property is different from default (start) - it's center in my case. Animations are still flickering, though, but the ink bar ends up in the right place.

amysorto commented 1 week ago

Closing this issue since there is no Stackblitz to reproduce and this issue refers to the legacy tabs, which no longer exist.