From 220e6b2a3e4b148c41f7a01b475652201e3288b1 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 15 Jan 2019 23:26:18 +0100 Subject: [PATCH] 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. --- src/lib/tabs/tab-header.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index dddcc37e765..461219d2858 100644 --- a/src/lib/tabs/tab-header.ts +++ b/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. */