[MdTab] underline misplaced when "fixed" alignment is changed after initial render

[zevdg]

Steps to reproduce

switch the value of md-alignment on an md-tabs after the initial render between "fixed" and any other value. (e.g. fixed for mobile widths and centered for larger screens).

Which browser?

vue@latest
[email protected]
at least chrome and chrome for android

What is expected?

the tab underlines should line up with the tabs

What is actually happening?

The underline is not the right width or in the right location.

Reproduction Link

https://codepen.io/zevdg/pen/XzOWma

[zevdg]

Hmmm, i'm still able to trigger this in a slightly more convoluted way.

I've made a new codepen at https://codepen.io/zevdg/pen/ZrGVYg

If you resize the window down to exactly 600 pixels or less and then maximize the window, you'll see the underline get out of sync again.

More generally, if you resize the window down to exactly 600 pixels or up to exactly 601 pixels, you'll see the strange behavior where the underline doesn't match the tab alignment. If you continue resizing, the underline will "catch up" with the tab alignment on the next fire of the resize event. This makes this bug relatively hard to trigger with manual drag/drop resizes, but fairly easy to trigger with instantaneous window events maximizing or rotating a device screen.

It's very possible that I'm doing something stupid in the way I'm setting up the resize event listener, so please double check my code and let me know if that is the case.

Wanting fixed alignment tabs at mobile widths and non-fixed at tablet/desktop widths seems like a pretty common use case, so if there's a weird trick to setting this up correctly, then maybe it should be added to the docs