mat-tabs: replace mat-ink-bar animated props with transform

[vladimir-barsuchenko]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Replace width / left animated props of mat-ink-bar with scaleX / translateX to gain some performance.

The only caveat is border radius. Which user probably might want to customize

[crisbeto]

We tried doing this already through 63b6fd9, but we had to revert it in #11661, because it was causing some other issues.

[vladimir-barsuchenko]

@crisbeto Thanks for your response.

Unfortunately your implementation didn't work because width: 1px was used. And this had an impact on scale. If we do next steps things will work for us =)

• pick the tab with maximum width (maxWidth)
• set ink-bar width to width: maxWidth
• calculate scaleX(${ currentTabWidth / maxWidth }). So our scaleX always be less than 1

Tested on Chrome / Firefox.

Video is attached to make it more visible https://youtu.be/s_-tn1THjoM

cc.@andrewseguin

[crisbeto]

Having to measure all the tabs in order to find the largest one sort of defeats the purpose since it'll trigger even more style recalculations. This is something that we'd have to do whenever the content of any of the tabs changes or when the window is resized.

[vladimir-barsuchenko]

@crisbeto true.

My point is that to achieve this goal we need to make sure that scaleX is less than 1.
I just made an assumption that ink-bar width won't ever be more than 1000px width.

And it works
In any case it is something to keep in mind

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}