Table: Horizontal Overflow on Initial Load of Virtual Scrolling Table Populated with Remote Data

[cjwang18]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-yphffm

Steps to reproduce

• Load the stackblitz
• Open preview in new window
• Horizontal scrollbar should be visible after data is loaded in table
• Toggling the visible columns via the select seems to resolve the issue

What is expected?

There should not be horizontal overflow present upon initial load of the table.

What is actually happening?

• A horizontal scrollbar is visible on the <cdk-virtual-scroll-viewport>
  • Perhaps the widths of the columns are not being calculated correctly.
  • I'm just speculating, but the amount of overflow seems to match the width of the vertical scrollbar.
• Using the nzLoading attribute on the table doesn't change the initial behavior

Initial Load with Mouse

After Toggling Visible Columns with Mouse

Potential Cause

• Seems to be related to Scrollbar inconsistency on an overflowed element #5518, in that the issue only appears when an external mouse is connected
• But I'm assuming there can be a fix for this since there are workarounds

Potential Workaround

• Set *ngIf="loading" on the table, but this is not ideal

Environment	Info
ng-zorro-antd	9.3.0
Browser	Google Chrome 83.0.4103.116 (Official Build) (64-bit)
OS	macOS 10.15.5

---

• Only some columns have widths specified
• Example contains additional code for layout and making the table full width and height on the page