`overflowX` and `overflowY` don't work in Google Chrome 78

[Imperat]

Expected behavior and actual behavior.

I want to hide scrollbars by using overflowX and overflowY styles. This fiddle works well in FireFox and MSEdge, but doesn't want work in Google Chrome 78 (Windows 10)

Steps to reproduce the problem.

Look at the fiddle: http://jsfiddle.net/ds6qbonL/

[TonyGermaneri]

By default, the grid will expand to show all of the data, no scroll bars. overflow* will create scroll bars.

When you say you want to hide scroll bars, are you saying you just don't want to see them or that you want to see all of the data at the same time?

You can hide them visually by changing the style of the grid and setting the scroll bar's width to 1px, maybe even try 0px, and setting the colors to transparent.

Be careful about showing all the data and using system scroll bars, it can cause a lot of lag when you have a lot of rows. This is the primary reason why there are scroll bars built into the lib, common scroll bars did not work to prevent high CPU usage when viewing hundreds of rows. And that is the primary focus of this lib, to view many rows without paging.

I hope this helps to answer your question.

[Imperat]

Thank you for the quick answer, @TonyGermaneri I just want to hide scrollbars to show my own scrollbars which look natively. (With a bit of magic of two div elemes, absolute positioning and z-indexing I've conquered this task). Even when I want to hide them, it's working in FF and MsEdge and won't work in Chrome. I completed my current work by forking your repo and removing function to render the scrollbars. Of course it's temporary solution and I am planning to delete my fork-dependency in the near future.

[Imperat]

Please, have a look at JS fiddle from different browsers :)

[TonyGermaneri]

Yeah, I can see they are different. A lot different. One is a web component <canvas-datagrid> and the other is a <canvas> element. That is probably why there is a difference in the way they are behaving. I can't see any elements with the overflow property applied to them, that means it is being interpreted by the resize function for FF:

https://github.com/TonyGermaneri/canvas-datagrid/blob/master/lib/events.js#L123

The chrome web component will have access to more data, this likely why there is a difference:

https://github.com/TonyGermaneri/canvas-datagrid/blob/master/lib/component.js#L46

There shouldn't be a difference, it exists because FF is slow to catch up to the web component standard, it should fix itself as FF adopts the standard, but I think it's still a bug for now given there is supposed to be a working abstraction layer (it doesn't work that well).

Hopefully seeing where the code touches the style will help you with your endeavors. I tried to use natural scroll bars in the past, but the blocker for me was that FF cannot create an empty element large enough to accomodate 50M rows, let alone 100M rows. Right now because the scroll bar is disconnected from the DOM, the grid can support as many rows as your browser has memory for. This fits the requirements for a number of high performance applications, but isn't always useful for everyone and sometimes the hoops that you have to jump through to get it working are not worth it, the style nonsense is the greatest problem, but a known problem at the onset of the project, any pure canvas project faces this problem.

That said, if you have any PRs, new scroll bar modes, etc. to contribute, I'd love to see what you have. Maybe there can be a mode that although limited in row count uses DOM scroll bars? I'm open to almost anything.

Let me know if I can be of any further assistance.