Table body scrollbars get hidden behind the table header

[NachoJusticia]

Environment

• Package version(s): 3.15.0
• Browser and OS versions: Chrome 79.0.3945.117 and MacOS Mojave 10.14.6.

Link to reproduce the bug: https://blueprintjs.com/docs/#table/features.sorting

Steps to reproduce

1. Go to https://blueprintjs.com/docs/#table/features.sorting
2. Do some scrolling in the table of the example

Actual behavior

The scrollbars get hidden behind the Table headers.

The vertical scrollbar gets hidden behind the Table header when the scroll position is at the top. The horizontal scrollbar gets hidden behind the Table row numbers (row header) of the left when the scroll position is at the left.

In the examples of the documentation the tables have just a few rows, so the vertical scrollbar is usually very big and you can see it always (even when it is hidden). The problem is when the table has many rows. In that case, the scrollbar is very small and it is completely hidden under the top header.

Expected behavior

The scrollbars should not be hidden.

Possible solution

The vertical scrollbar should start after the header, as the header position is fixed.

[attila-kun]

I think this might be Mac specific. This CSS fixed the issue for me:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}