fix(tabs): tab labels overly truncated on IE11 when pagination active (…

…#11432)

remove unused calcPagingWidth()
convert all translate3d to translate for better IE11 support

Fixes #10406

src/components/tabs/js/tabsController.js

@@ -236,7 +236,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
     // Fix double-negative which can happen with RTL support
     newValue = newValue.replace('--', '');
 
-    angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate3d(' + newValue + ', 0, 0)');
+    angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate(' + newValue + ', 0)');
     $scope.$broadcast('$mdTabsPaginationChanged');
   }
 
@@ -620,14 +620,6 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
     ctrl.shouldPaginate = shouldPaginate();
   }
 
-  /**
-   * Calculates the width of the pagination wrapper by summing the widths of the dummy tabs.
-   * @returns {number} the width of the pagination wrapper in pixels
-   */
-  function calcPagingWidth () {
-    return calcTabsWidth(getElements().tabs);
-  }
-
   /**
    * @param {Array<HTMLElement>} tabs tab item elements for use in computing total width
    * @returns {number} the width of the tabs in the specified array in pixels
@@ -647,9 +639,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
   }
 
   /**
-   * @returns {number} either the max width as constrained by the container or the max width from an
-   * old version of the Material Design spec.
-   * TODO update max tab width to equal the spec in 1.2.
+   * @returns {number} either the max width as constrained by the container or the max width from
+   * the 2017 version of the Material Design spec.
    */
   function getMaxTabWidth() {
     var elements = getElements(),
@@ -663,24 +654,6 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
     return Math.max(0, Math.min(containerWidth - 1, specMax));
   }
 
-  /**
-   * @returns {number} the min width from an old version of the Material Design spec. This returns
-   * a larger min width if the container width is larger than 600px.
-   * TODO update min tab width to equal the spec in 1.2.
-   */
-  function getMinTabWidth() {
-    var elements = getElements(),
-      containerWidth = elements.canvas.clientWidth,
-      xsBreakpoint = 600,
-
-      // See https://material.io/archive/guidelines/components/tabs.html#tabs-specs
-      specMin = containerWidth > xsBreakpoint ? 160 : 72;
-
-    // Do the spec minimum, or the canvas width; whichever is *smaller* (tabs larger than the canvas
-    // width can break the pagination) but not less than 0
-    return Math.max(0, Math.min(containerWidth - 1, specMin));
-  }
-
   /**
    * Re-orders the tabs and updates the selected and focus indexes to their new positions.
    * This is triggered by `tabDirective.js` when the user's tabs have been re-ordered.

src/components/tabs/tabs.scss

@@ -76,7 +76,7 @@ md-tabs-wrapper {
   display: block;
   position: relative;
   // transform is needed for iOS Safari to prevent content from disappearing on scroll
-  transform: translate3d(0, 0, 0);
+  transform: translate(0, 0);
   md-prev-button, md-next-button {
     height: 100%;
     width: $tabs-paginator-width;
@@ -103,7 +103,7 @@ md-tabs-wrapper {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate3d(-50%, -50%, 0);
+      transform: translate(-50%, -50%);
     }
 
     // For RTL tabs, rotate the buttons
@@ -121,7 +121,7 @@ md-tabs-wrapper {
 
     // In regular mode, we need to flip the chevron icon to point the other way
     md-icon {
-      transform: translate3d(-50%, -50%, 0) rotate(180deg);
+      transform: translate(-50%, -50%) rotate(180deg);
     }
   }
   &.md-stretch-tabs {
@@ -166,8 +166,9 @@ md-pagination-wrapper {
   display: flex;
   transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
   position: absolute;
+  width: 999999px;
   @include rtl-prop(left, right, 0, auto);
-  transform: translate3d(0, 0, 0);
+  transform: translate(0, 0);
   &.md-center-tabs {
     position: relative;
     justify-content: center;
@@ -194,7 +195,7 @@ md-tab-content {
   transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
   overflow: auto;
   // transform is needed for iOS Safari to prevent content from disappearing on scroll
-  transform: translate3d(0, 0, 0);
+  transform: translate(0, 0);
   &.md-no-scroll {
     bottom: auto;
     overflow: hidden;