diff --git a/src/components/tabs/js/tabsController.js b/src/components/tabs/js/tabsController.js index d412f86234..49f6f04c85 100644 --- a/src/components/tabs/js/tabsController.js +++ b/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} 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. diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index e1bf7fab39..c96f0997d6 100644 --- a/src/components/tabs/tabs.scss +++ b/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;