fix(tabs): pagination not enabled on init on some browsers

Fixes an issue where the tabs pagination may not be enabled on some slower browsers, because elements are being measured before they're done rendering.

Fixes #7983.

Author: crisbeto

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

@@ -243,7 +243,7 @@ describe('MatTabHeader', () => {
       });
     });
 
-    it('should re-align the ink bar when the direction changes', () => {
+    it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);
 
       const inkBar = fixture.componentInstance.tabHeader._inkBar;
@@ -253,9 +253,10 @@ describe('MatTabHeader', () => {
 
       change.next();
       fixture.detectChanges();
+      tick(20); // Angular turns rAF calls into 16.6ms timeouts in tests.
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
     it('should re-align the ink bar when the window is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);

src/lib/tabs/tab-header.ts

@@ -8,7 +8,6 @@
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
-import {startWith} from 'rxjs/operators';
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -188,11 +187,15 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   ngAfterContentInit() {
     const dirChange = this._dir ? this._dir.change : observableOf(null);
     const resize = this._viewportRuler.change(150);
-
-    this._realignInkBar = merge(dirChange, resize).pipe(startWith(null)).subscribe(() => {
+    const realign = () => {
       this._updatePagination();
       this._alignInkBarToSelectedTab();
-    });
+    };
+
+    // Defer the first call in order to allow for slower browsers to lay out the elements.
+    // This helps in cases where the user lands directly on a page with paginated tabs.
+    typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
+    this._realignInkBar = merge(dirChange, resize).subscribe(realign);
   }
 
   ngOnDestroy() {