Revert "perf(tabs): use a transform to resize and move the ink bar" (#11661)

This reverts commit 63b6fd9.

Author: andrewseguin

src/lib/tabs/_tabs-common.scss

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

src/lib/tabs/ink-bar.ts

@@ -8,13 +8,14 @@
 
 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.
  */
 // tslint:disable-next-line class-name Using leading underscore to denote internal interface.
 export interface _MatInkBarPositioner {
-  (element: HTMLElement): {left: number, width: number};
+  (element: HTMLElement): { left: string, width: string };
 }
 
 /** Injection token for the MatInkBar's Positioner. */
@@ -30,8 +31,8 @@ export const _MAT_INK_BAR_POSITIONER =
  */
 export function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner {
   const method = (element: HTMLElement) => ({
-    left: element ? (element.offsetLeft || 0) : 0,
-    width: element ? (element.offsetWidth || 0) : 0,
+    left: element ? (element.offsetLeft || 0) + 'px' : '0',
+    width: element ? (element.offsetWidth || 0) + 'px' : '0',
   });
 
   return method;
@@ -45,15 +46,11 @@ export function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner {
   selector: 'mat-ink-bar',
   host: {
     'class': 'mat-ink-bar',
-    '[class.mat-ink-bar-animations-enabled]': 'shouldAnimate',
   },
 })
 export class MatInkBar {
-  /** Whether the ink bar should animate to its position. */
-  shouldAnimate = false;
-
   constructor(
-    private _elementRef: ElementRef<HTMLElement>,
+    private _elementRef: ElementRef,
     private _ngZone: NgZone,
     @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { }
 
@@ -90,9 +87,9 @@ export class MatInkBar {
    */
   private _setStyles(element: HTMLElement) {
     const positions = this._inkBarPositioner(element);
-    const inkBar = this._elementRef.nativeElement;
+    const inkBar: HTMLElement = this._elementRef.nativeElement;
 
-    inkBar.style.transform = `translateX(${positions.left}px) scaleX(${positions.width})`;
-    this.shouldAnimate = true;
+    inkBar.style.left = positions.left;
+    inkBar.style.width = positions.width;
   }
 }