Scrollbar flickering issue when widget matches window height

[lrnicoka]

Subject of the issue

I am using a grid where the widgets do not have a predefined size. When the widget exactly matches the height of the window, there is an issue with the scrollbar appearing and disappearing, which causes an infinite flickering effect.

Your environment

• version of gridstack.js - 10.2.0
• which browser/OS - Chrome / Windows 11

Steps to reproduce

Reproduced on the demo "Float grid demo" with float = false
https://github.com/gridstack/gridstack.js/assets/173177247/55f0d978-9292-427b-a959-e45f9a7c9970

Expected behavior

It should not be flickering

[adumesny]

not seeing this on mac (travel machine) so will need to try on windows when I get home...

[adumesny]

not seeing this on windows either (modified float:false), so closing until you can provide video showing the issue...

[lrnicoka]

Still having this issue, with float: false

gridstack-flickering-2.mp4

[lrnicoka]

@adumesny Any updates about this issue ?

[abdurriq]

This appears to be related to the scrollbar appearing and disappearing causing resizing (https://stackoverflow.com/a/21563741). The solution I found was just to use overflow-y: scroll to allow the scrollbar to remain:

        body {
            overflow-y: scroll;
        }

[adumesny]

I see it now. it has to do with with cellHeight:'auto' keeping items square (so available width affect cellHeight, which in turns affects entire height, which affects showing the scrollbar, which reduces width -> reduces cellHeight which which shrinks the total height, again and again....

there isn't a 'fix' per say. Either you set cellHeight:'initial' or a fixed size so it doesn't change dynamically, or you always show scrollbar or hard size the grid width so it doesn't change when scrollbar show/hide.

the only 'fix' would be to base the size on the window (which doesn't change) instead of grid - but a grid not take entire page would not behave correctly, or somewhow detect a parent has a scrollbar and append that width to our math...

seems too corner case. Maybe default to 'auto' was a bad idea :)

[lrnicoka]

I used cellHeight:'initial' and it fixed my problem, thank you !