tabs: wrong tab position when a new tab is added

[Axeldorf]

Bug, enhancement request, or proposal:

There is an error with tabs position when you add a new tab and it does not fit and needs to be horizontally scrolled.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Detailed Reproduction Steps:

1. Go to https://material.angularjs.org/HEAD/demo/tabs
2. Go to "Dyanmic tabs" block.
3. Add a new tab with any label and any content.

What is the expected behavior?

A new tab is created and tabs are scrolled to it. Then you can go back with the left arrow until first tab.

What is the current behavior?

A new tab is created and tabs are scrolled to it. You cannot see any tab until you click on left arrow, then you see some tabs and you cannot go to previous tabs.

What is the use-case or motivation for changing an existing behavior?

I want to create new tabs dynamically and I want to be able to go to first tab.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.5
• AngularJS Material: 1.1.14
• OS: Ubuntu 18.04
• Browsers: Chome v72.0.3626.119

Is there anything else we should know? Stack Traces, Screenshots, etc.

This bug occurs since AngularJS Material v1.1.11, with v1.1.10 it is working correctly.

[Splaktar]

Thank you for this report! We'll work on a fix for this ASAP!

[Splaktar]

This is caused by this line in 1.1.11

material/src/components/tabs/tabs.scss

Line 169 in 2b2f441

width: 999999px;

and this block in 1.1.12

material/src/components/tabs/js/tabsController.js

Lines 575 to 580 in a49043d

	// Work around width calculation issues on IE11 when pagination is enabled
	if (shouldPaginate) {
	getElements().paging.style.width = '999999px';
	} else {
	getElements().paging.style.width = undefined;
	}

[Splaktar]

These are both (PR #11432 and PR #11567) a result of the need to fix this regression in IE with pagination.

We had better fixes that didn't use 999999px in PR #11432, but they caused too many problems in the Google presubmits. So we had to fall back to this solution.

[Splaktar]

OK, f2dbe07 will fix this for browsers other than IE11. IE11 still needs this 999999px hack to make pagination usable (avoid all labels being truncated to 1 character and ...).

• Investigate how to fix/disable animations on IE11 while keeping pagination working