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

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/startWith';
 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() {