bug(MatTabHeader): Rouding problem when zooming will show PaginationControls when not needed

[Anderman]

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-1v9muy
see also issue mat-tab-header-pagination displaying incorrectl

Steps to reproduce:

1. open in fullscreen and try to zoom in and out until there are PaginationControls visible

Expected Behavior

No PaginationControls when not needed

Actual Behavior

PaginationControls are visible. Sometimes they are always but are not easy to reproduce in stackblitz

Environment

• Angular:
• CDK/Material:
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows
  

Can be fixed by adding 1
see also SO

// original code from paginated-tab-header

function _checkPaginationEnabled(this: MatTabHeader) {
  if (this.disablePagination) {
    this._showPaginationControls = false;
  } else {
    // const isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
    const isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth + 1;
    if (!isEnabled) {
      this.scrollDistance = 0;
    }

    if (isEnabled !== this._showPaginationControls) {
      this._changeDetectorRef.markForCheck();
    }

    this._showPaginationControls = isEnabled;
  }
}

Log of scrollwidth,offsetwidth when zooming in and out. The scrollwidth is not constant with a specefic zooming level but offset width is.

[jelbourn]

@Anderman at which zoom level do you run into this?

[crisbeto]

I don't think that the problem is a rounding error, but rather than the ink bar has a transition and it ends up overflowing the container while it is being measured. I've submitted #23759 that should resolve it.