fix(tabs): pagination not working correctly on chrome in rtl mode (#14690)

In #13223 we added some code that resets the scroll position of the tab header, in order to fix a bug on IE and Edge. The changes seem to have introduced an issue on newer Chrome versions in RTL mode where the transform gets negated and the header content doesn't move. These changes scope the fix only to IE and Edge.

Fixes #14689.

Author: crisbeto

src/lib/tabs/tab-header.ts

@@ -34,6 +34,7 @@ import {takeUntil} from 'rxjs/operators';
 import {MatInkBar} from './ink-bar';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {FocusKeyManager} from '@angular/cdk/a11y';
+import {Platform} from '@angular/cdk/platform';
 
 
 /**
@@ -141,8 +142,9 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
               private _changeDetectorRef: ChangeDetectorRef,
               private _viewportRuler: ViewportRuler,
               @Optional() private _dir: Directionality,
-              // @breaking-change 8.0.0 `_ngZone` parameter to be made required.
-              private _ngZone?: NgZone) {
+              // @breaking-change 8.0.0 `_ngZone` and `_platforms` parameters to be made required.
+              private _ngZone?: NgZone,
+              private _platform?: Platform) {
     super();
   }
 
@@ -332,6 +334,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
   _updateTabScrollPosition() {
     const scrollDistance = this.scrollDistance;
+    const platform = this._platform;
     const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
 
     // Don't use `translate3d` here because we don't want to create a new layer. A new layer
@@ -344,8 +347,12 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
 
     // Setting the `transform` on IE will change the scroll offset of the parent, causing the
     // position to be thrown off in some cases. We have to reset it ourselves to ensure that
-    // it doesn't get thrown off.
-    this._tabListContainer.nativeElement.scrollLeft = 0;
+    // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing
+    // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).
+    // @breaking-change 8.0.0 Remove null check for `platform`.
+    if (platform && (platform.TRIDENT || platform.EDGE)) {
+      this._tabListContainer.nativeElement.scrollLeft = 0;
+    }
   }
 
   /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */