Scroll-bars appear always on table in Windows

Bug Report

Vertical Scroll bars are displayed always on table even when there is no content to scroll.

Description

Terra-Table has overflow-y:scroll style property for both table header and body when fill prop is set to true on table. overflow-y:scroll property causes scroll-bars to appear always in Windows.

Steps to Reproduce

1. Open IE or any browsers in Windows
2. Navigate to : https://engineering.cerner.com/terra-core/tests/terra-table/table/fill
3. Observe vertical scroll bar appears even when no content is hidden.

Additional Context / Screenshots

Same can be seen on terra-table WDIO screenshots as well : https://github.com/cerner/terra-core/blob/main/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/fill.png

Expected Behavior

scroll-bar should display only when content is overflown.

Possible Solution

Replacing the overflow-y:scroll property with overflow-y:auto will make scroll bar to display only when it is required and removes empty scrolls from windows browsers and from terra-wdio-screen shots as well.

Environment

• Component Name and Version:
• Browser Name and Version: Chrome Windows, IE, Chromium Windows
• Node/npm Version: [e.g. Node 8/npm 5]
• Webpack Version:
• Operating System and version (desktop or mobile): Windows

@ Mentions

[tbiethman]

@supreethmr I believe everything is working as expected in both operating systems. macOS has a setting (System Preferences > General > Show scroll bars) that cause the discrepancy you are seeing depending on whether the trackpad or a mouse is used. When set to “Always” or when a mouse is used, the scrollbars will always be visible like in your windows screenshot.

I think the most important thing here is that the column headers continue to align with or without the scrollbars visible. You have a screenshot above that shows a misalignment (visible scrollbar on body but not the header). Is that reproducible in released code?

[ryanthemanuel]

@supreethmr, this is actually by design. Parsing through old conversations with Dave Kasper:

“It’s a visual bug in IE, but we cannot disable the rule as it’s only this allowing the columns to align when using a fixed header implementation. All other browser reserve the inset scroll bar width, but hides the controls, IE doesn’t bother to hide them”