Material: mdNavbar > mdNavInkBar: does not update position on screen resize

[tuncelmert]

Actual Behavior:

• What is the issue? *
  The ink bar below the tab buttons does not update it's position if an item with flex exists besides md-nav-items.

• What is the expected behavior?
  Ink bar should follow related button.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Codepen Example
• Details: First tab item is using flex. Select the second or third tab and change screen width. The bar stays where it is.

Angular Versions:

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.99
• OS: * Windows 10 (64-Bit)

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[chmelevskij]

Hey there, I've got the same issue. Started thinking about fixing it. Problem is that md-nav-ink-bar is element below the whole list and is not aware of those changes happening. Started implementing other solution where ::after is used for representation of the active item and inkbar appears only on animation. But problem still persists with overflow of the parent.

Will try to reimplement it whole with just ::after and translations.

[Splaktar]

Flex isn't really the issue here. The problem occurs any time that a tab's width is changed by CSS. In my CodePen I replaced the flex with width: 400px and the same issue occured. The navBar just seems to not be expecting the tab sizes to be modified, which isn't correct.

[chmelevskij]

@Splaktar as you mentioned in the mailing list I'll explain my approach to fix it. All of the navbar items have ::after element which has opacity: 1; if active. Animation of ink-bar is done by assigning keyframes with transform: translateX to ::after where starting point of ink-bar is previous active item and finish is the current one. To animate the ::after <style></style> is injected into the head and keyframe translation distance is modified each time active tab changes. At the moment it wins a little bit performance wise and looks smoother because of transform being used but there is a bit of a downside because styles are recalculated when injecting styles. But this either could be fixed by calculating the distances upfront or just having sort of cache for animations which has been used already.

[chmelevskij]

So could anyone from the core team tell me if it's worth creating the PR?

[Splaktar]

@chmelevskij I've reached out to try and get you a response here. Thanks for your effort and hanging in there with the delayed response.

[clshortfuse]

We've made some changes to mdTab recently with resizing issues. I will look into seeing if bringing these changes over to navBar will solve this issue.

[ErinCoughlan]

+1 I'd love to see this fixed.

[chmelevskij]

@Splaktar Thanks!!! @clshortfuse yeah, it probably would make more sense if mdTab and mdNavbar would share the code.

[Splaktar]

@chmelevskij I know that it's been far too long, but it is indeed worth creating a PR to fix this issue now. Thank you for your patience.

I added an updated CodePen repro for AngularJS 1.1.5 based on https://github.com/angular/material/issues/11013.

[chmelevskij]

@Splaktar it definitely some time passed... So wasn't it updated with the tabs? I could create the PR just need to merge my version with the master now....

[Splaktar]

No, unfortunately this issue never got resolved. We're still seeing some duplicate issues get submitted and I've verified that it is still there in 1.1.5.

Would love to review the PR and see if it's something that we can get in, thank you :)