fix(tabs): fix ink not showing on chrome 57 (#3041)

* fixes

* remove host class

* fix tab tests

Author: andrewseguin

src/lib/tabs/_tabs-common.scss

@@ -28,8 +28,6 @@ $mat-tab-animation-duration: 500ms !default;
 @mixin tab-header {
   overflow: hidden;
   position: relative;
-  display: flex;
-  flex-direction: row;
   flex-shrink: 0;
 }
 

src/lib/tabs/tab-header.html

@@ -9,7 +9,9 @@
 <div class="mat-tab-label-container" #tabListContainer
      (keydown)="_handleKeydown($event)">
   <div class="mat-tab-list" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
-    <ng-content></ng-content>
+    <div class="mat-tab-labels">
+      <ng-content></ng-content>
+    </div>
     <md-ink-bar></md-ink-bar>
   </div>
 </div>

src/lib/tabs/tab-header.scss

@@ -3,6 +3,7 @@
 @import 'tabs-common';
 
 .mat-tab-header {
+  display: flex;
   @include tab-header;
 }
 
@@ -78,8 +79,11 @@
 }
 
 .mat-tab-list {
-  display: flex;
   flex-grow: 1;
   position: relative;
   transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.mat-tab-labels {
+  display: flex;
 }

src/lib/tabs/tab-header.spec.ts

@@ -216,7 +216,7 @@ interface Tab {
     <md-tab-header [selectedIndex]="selectedIndex"
                (indexFocused)="focusedIndex = $event"
                (selectFocusedIndex)="selectedIndex = $event">
-      <div md-tab-label-wrapper style="min-width: 30px"
+      <div md-tab-label-wrapper style="min-width: 30px; width: 30px"
            *ngFor="let tab of tabs; let i = index"
            [disabled]="!!tab.disabled"
            (click)="selectedIndex = i">

src/lib/tabs/tab-nav-bar/tab-nav-bar.html

@@ -1,2 +1,5 @@
-<ng-content></ng-content>
+<div class="mat-tab-links">
+  <ng-content></ng-content>
+</div>
+
 <md-ink-bar></md-ink-bar>

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -6,6 +6,11 @@
   @include tab-header;
 }
 
+.mat-tab-links {
+  display: flex;
+  position: relative;
+}
+
 // Wraps each link in the header
 .mat-tab-link {
   @include tab-label;

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -26,11 +26,23 @@ import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
   encapsulation: ViewEncapsulation.None,
 })
 export class MdTabNavBar {
+  _activeLinkChanged: boolean;
+  _activeLinkElement: ElementRef;
+
   @ViewChild(MdInkBar) _inkBar: MdInkBar;
 
-  /** Animates the ink bar to the position of the active link element. */
-  updateActiveLink(element: HTMLElement) {
-    this._inkBar.alignToElement(element);
+  /** Notifies the component that the active link has been changed. */
+  updateActiveLink(element: ElementRef) {
+    this._activeLinkChanged = this._activeLinkElement != element;
+    this._activeLinkElement = element;
+  }
+
+  /** Checks if the active link has been changed and, if so, will update the ink bar. */
+  ngAfterContentChecked(): void {
+    if (this._activeLinkChanged) {
+      this._inkBar.alignToElement(this._activeLinkElement.nativeElement);
+      this._activeLinkChanged = false;
+    }
   }
 }
 
@@ -39,6 +51,9 @@ export class MdTabNavBar {
  */
 @Directive({
   selector: '[md-tab-link], [mat-tab-link]',
+  host: {
+    '[class.mat-tab-link]': 'true',
+  }
 })
 export class MdTabLink {
   private _isActive: boolean = false;
@@ -49,11 +64,11 @@ export class MdTabLink {
   set active(value: boolean) {
     this._isActive = value;
     if (value) {
-      this._mdTabNavBar.updateActiveLink(this._element.nativeElement);
+      this._mdTabNavBar.updateActiveLink(this._elementRef);
     }
   }
 
-  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
+  constructor(private _mdTabNavBar: MdTabNavBar, private _elementRef: ElementRef) {}
 }
 
 /**