Skip to content

Commit d7a8892

Browse files
crisbetoandrewseguin
authored andcommitted
fix(tabs): paginated header offset incorrect on IE (#13223)
Currently we position the paginated tab header items using a `transform` in order to be able to animate them. On IE setting the transform also ends up changing the scroll position of the parent element, causing the tab offset to be thrown off. These changes reset the scroll after setting the transform. Fixes #13217.
1 parent 264f306 commit d7a8892

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

src/lib/tabs/tab-header.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,11 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
328328
// and ripples will exceed the boundaries of the visible tab bar.
329329
// See: https://github.com/angular/material2/issues/10276
330330
this._tabList.nativeElement.style.transform = `translateX(${translateX}px)`;
331+
332+
// Setting the `transform` on IE will change the scroll offset of the parent, causing the
333+
// position to be thrown off in some cases. We have to reset it ourselves to ensure that
334+
// it doesn't get thrown off.
335+
this._tabListContainer.nativeElement.scrollLeft = 0;
331336
}
332337

333338
/** Sets the distance in pixels that the tab header should be transformed in the X-axis. */

0 commit comments

Comments
 (0)