fix(tabs): replaces pagination transition with transform rather than left for performance

Related to #2821

Author: Robert Messerle

docs/app/css/style.css

@@ -750,8 +750,6 @@ ul.methods > li:first-child > *:first-child {
 .version-picker {
   background: #5262BC !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  z-index: 3;
-  position: relative;
 }
 .version-picker .menu-toggle-list {
   background: transparent !important;

docs/config/template/index.template.html

@@ -17,7 +17,7 @@
               md-component-id="left"
               md-is-locked-open="$mdMedia('gt-sm')">
 
-    <header class="nav-header md-whiteframe-glow-z1">
+    <header class="nav-header">
       <a ng-href="#/" class="docs-logo">
         <img src="img/icons/angular-logo.svg"/>
         <h1 class="docs-logotype md-heading">Angular Material</h1>

src/components/tabs/js/tabsController.js

@@ -119,7 +119,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
 
   function handleOffsetChange (left) {
     var newValue = shouldCenterTabs() ? '' : '-' + left + 'px';
-    angular.element(elements.paging).css('left', newValue);
+    angular.element(elements.paging).css('transform', 'translate3d(' + newValue + ', 0, 0)');
     $scope.$broadcast('$mdTabsPaginationChanged');
   }
 

src/components/tabs/tabs.scss

@@ -142,7 +142,7 @@ md-pagination-wrapper {
   @include pie-clearfix;
   height: $tabs-header-height;
   display: block;
-  transition: left $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
+  transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
   position: absolute;
   width: 999999px;
   left: 0;