fix(tabs): new tab animation broken by code to support IE11 (#11711)

<!-- 
Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed.
-->
## PR Checklist
Please check that your PR fulfills the following requirements:
- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [ ] Tests for the changes have been added or this is not a bug fix / enhancement
- [x] Docs have been added, updated, or were not required

## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
```
[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?
The scroll to new tab animation is broken.
<!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. -->
Issue Number: 
Fixes #11689

## What is the new behavior?
The scroll to new tab animation is fixed for browsers other than IE.

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
<!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. -->

## Other information

Author: Splaktar

package-lock.json

@@ -115,4 +115,4 @@
     "not bb <= 10",
     "not op_mob <= 12.1"
   ]
-}
+}

package.json

@@ -32,14 +32,14 @@
       previous = null;
     $scope.tabs = tabs;
     $scope.selectedIndex = 0;
-    $scope.$watch('selectedIndex', function(current, old) {
+    $scope.$watch('selectedIndex', function(newVal, oldVal) {
       previous = selected;
-      selected = tabs[current];
-      if (old + 1 && (old !== current)) {
-        $log.debug('Goodbye ' + previous.title + '!');
+      selected = tabs[newVal];
+      if (oldVal + 1 && !angular.equals(oldVal, newVal)) {
+        $log.log('Goodbye ' + previous.title + '!');
       }
-      if (current + 1) {
-        $log.debug('Hello ' + selected.title + '!');
+      if (newVal + 1 > 0) {
+        $log.log('Hello ' + selected.title + '!');
       }
     });
     $scope.addTab = function(title, view) {
@@ -52,4 +52,3 @@
     };
   }
 })();
-

src/components/tabs/demoDynamicTabs/script.js

@@ -25,7 +25,8 @@
  * @param {string=} label Optional attribute to specify a simple string as the tab label
  * @param {boolean=} ng-disabled If present and expression evaluates to truthy, disabled tab
  *  selection.
- * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the tab's button
+ * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the
+ *  tab's button
  * @param {expression=} md-on-deselect Expression to be evaluated after the tab has been
  *  de-selected.
  * @param {expression=} md-on-select Expression to be evaluated after the tab has been selected.
@@ -36,7 +37,8 @@
  * @usage
  *
  * <hljs lang="html">
- * <md-tab label="My Tab" md-tab-class="my-content-tab" ng-disabled md-on-select="onSelect()" md-on-deselect="onDeselect()">
+ * <md-tab label="My Tab" md-tab-class="my-content-tab" ng-disabled md-on-select="onSelect()"
+ *         md-on-deselect="onDeselect()">
  *   <h3>My Tab content</h3>
  * </md-tab>
  *

src/components/tabs/js/tabDirective.js

@@ -230,13 +230,13 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
    * @param {string|number} left
    */
   function handleOffsetChange (left) {
-    var elements = getElements();
     var newValue = ((ctrl.shouldCenterTabs || isRtl() ? '' : '-') + left + 'px');
 
     // Fix double-negative which can happen with RTL support
     newValue = newValue.replace('--', '');
 
-    angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate(' + newValue + ', 0)');
+    angular.element(getElements().paging).css($mdConstant.CSS.TRANSFORM,
+                                              'translate(' + newValue + ', 0)');
     $scope.$broadcast('$mdTabsPaginationChanged');
   }
 
@@ -439,11 +439,11 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
    * Create an entry in the tabs array for a new tab at the specified index.
    * @param {Object} tabData tab to insert
    * @param {number} index location to insert the new tab
-   * @returns {*}
+   * @returns {Object} the inserted tab
    */
   function insertTab (tabData, index) {
     var hasLoaded = loaded;
-    var proto     = {
+    var proto = {
           getIndex:     function () { return ctrl.tabs.indexOf(tab); },
           isActive:     function () { return this.getIndex() === ctrl.selectedIndex; },
           isLeft:       function () { return this.getIndex() < ctrl.selectedIndex; },
@@ -455,24 +455,27 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
           },
           id:           $mdUtil.nextUid(),
           hasContent: !!(tabData.template && tabData.template.trim())
-        },
-        tab       = angular.extend(proto, tabData);
+    };
+    var tab = angular.extend(proto, tabData);
+
     if (angular.isDefined(index)) {
       ctrl.tabs.splice(index, 0, tab);
     } else {
       ctrl.tabs.push(tab);
     }
-
     processQueue();
     updateHasContent();
+
     $mdUtil.nextTick(function () {
       updatePagination();
       setAriaControls(tab);
 
       // if autoselect is enabled, select the newly added tab
-      if (hasLoaded && ctrl.autoselect) $mdUtil.nextTick(function () {
-        $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
-      });
+      if (hasLoaded && ctrl.autoselect) {
+        $mdUtil.nextTick(function () {
+          $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
+        });
+      }
     });
     return tab;
   }
@@ -576,17 +579,20 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
     });
 
     shouldPaginate = canvasWidth < 0;
-    // Work around width calculation issues on IE11 when pagination is enabled
-    if (shouldPaginate) {
-      getElements().paging.style.width = '999999px';
-    } else {
-      getElements().paging.style.width = undefined;
+    // Work around width calculation issues on IE11 when pagination is enabled.
+    // Don't do this on other browsers because it breaks scroll to new tab animation.
+    if ($mdUtil.msie) {
+      if (shouldPaginate) {
+        getElements().paging.style.width = '999999px';
+      } else {
+        getElements().paging.style.width = undefined;
+      }
     }
     return shouldPaginate;
   }
 
   /**
-   * Finds the nearest tab index that is available.  This is primarily used for when the active
+   * Finds the nearest tab index that is available. This is primarily used for when the active
    * tab is removed.
    * @param newIndex
    * @returns {*}

src/components/tabs/js/tabsController.js

@@ -901,7 +901,14 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       // The XMLSerializer API is supported on IE11 and is the recommended workaround.
       var serializer = new XMLSerializer();
       return serializer.serializeToString(element);
-    }
+    },
+
+    /**
+     * Support: IE 9-11 only
+     * documentMode is an IE-only property
+     * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
+     */
+    msie: window.document.documentMode
   };
 
   // Instantiate other namespace utility methods