Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 15, 2019
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions src/lib/tabs/tab-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';


/**
Expand Down Expand Up @@ -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();
}

Expand Down Expand Up @@ -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
Expand All @@ -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. */
Expand Down