Grid: Virtual scrolling - Part of scrollbar not visible (Edge)

[joerneu]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• React Grid
• React Chart

Current Behaviour

With Edge part of the vertical scrollbar is not visible and cannot be used:

Expected Behaviour

Same layout and behavior as other browsers.

Steps to Reproduce (for Bugs)

Virtual scrolling demo

• Select "Bootstrap 4"

Environment

• browser: Edge
• bootstrap: 4

[joerneu]

Found another instance where part of a scrollbar is not visible: (No virtual scrolling)

Data editing demo

(I found so many issues just looking at the Demos that I am wondering if Edge is missing from your browser tests?)

[ushkal]

Hi,

We found that this issue is caused by the following bug in the Edge browser: Sticky element overlaps a scrollbar of a container element We won't fix this problem as it is related to the browser.

[joerneu]

How about a workaround?

Not fixing it or implementing a workaround makes this feature useless on Edge.

The workaround could probably be as simple as removing:

-ms-overflow-style: -ms-autohiding-scrollbar

At least according to the issue that you linked to.

If you are not going to fix it, you should document that Edge is not fully supported and has issues.

(I believe that it is a mistake to not support IE11 and Edge fully. Those two browsers are often the only browsers allowed in corporate environments.)

[ushkal]

We discussed the issue again and decided to fix it on our side. In the meantime, you can use the following workaround:

const Container = ({ style, ...restProps }) => (
  <VirtualTable.Container 
    style={{...style, msOverflowStyle: 'auto'}} 
    {...restProps}
  />
);

<Grid>
  ...
  <VirtualTable containerComponent={Container} />
  ...
</Grid>

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.