perf(tabs): use a transform to resize and move the ink bar

Uses a transform, rather than `left` and `width` to move/resize the ink bar in order to ensure a smoother transition.

src/lib/tabs/_tabs-common.scss

@@ -50,17 +50,20 @@ $mat-tab-animation-duration: 500ms !default;
   $height: 2px;
 
   position: absolute;
+  left: 0;
   bottom: 0;
   height: $height;
-  transition: $mat-tab-animation-duration $ease-in-out-curve-function;
+  width: 1px;
+  transform-origin: 0;
+  transition: transform $mat-tab-animation-duration $ease-in-out-curve-function;
 
   .mat-tab-group-inverted-header & {
     bottom: auto;
     top: 0;
   }
 
   @include cdk-high-contrast {
-    outline: solid $height;
+    border-bottom: solid $height;
     height: 0;
   }
 }

src/lib/tabs/ink-bar.ts

@@ -6,15 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Directive, ElementRef, Inject, InjectionToken, NgZone } from '@angular/core';
+import {Directive, ElementRef, Inject, InjectionToken, NgZone} from '@angular/core';
 
 /**
  * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink
  * bar in a set of tabs.
+ * @deprecated Signature to be changed to `{left: number, width: number}`.
+ * @deletion-target 7.0.0
  */
 // tslint:disable-next-line class-name Using leading underscore to denote internal interface.
 export interface _MatInkBarPositioner {
-  (element: HTMLElement): { left: string, width: string };
+  (element: HTMLElement): {left: string|number, width: string|number};
 }
 
 /** Injection token for the MatInkBar's Positioner. */
@@ -46,7 +48,7 @@ export const _matInkBarPositioner: _MatInkBarPositioner = (element: HTMLElement)
 })
 export class MatInkBar {
   constructor(
-    private _elementRef: ElementRef,
+    private _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,
     @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { }
 
@@ -83,9 +85,9 @@ export class MatInkBar {
    */
   private _setStyles(element: HTMLElement) {
     const positions = this._inkBarPositioner(element);
-    const inkBar: HTMLElement = this._elementRef.nativeElement;
+    const left = parseFloat(positions.left.toString());
+    const width = parseFloat(positions.width.toString());
 
-    inkBar.style.left = positions.left;
-    inkBar.style.width = positions.width;
+    this._elementRef.nativeElement.style.transform = `translateX(${left}px) scaleX(${width})`;
   }
 }