Overflow: auto causes flickering vertical scroll bar
Hi everyone,
I'm currently working on a React component that has a maximum height limit. Once it reaches this height, overflow: auto is applied to allow scrolling. The component's children are collapsible accordions, which are initially collapsed. When all accordions are expanded, the content exceeds the max height and the scrollbar appears as expected.
The issue comes up when collapsing the accordions. As the content height decreases, the scrollbar briefly flickers before disappearing. I’ve already tried setting scrollbar-gutter: stable, but the scrollbar thumb still flickers before it goes away.
I’ve spent quite a bit of time debugging this and would really appreciate any suggestions or ideas on how to fix the flickering behaviour.
Thanks in advance!
8 Replies
from what i understood: don't dynamically set
overflow: auto
set it and leave itoverflow: auto is always set to the parent. The scroll bar will appear only when all the accordions have expanded
are you using safari?
https://caniuse.com/mdn-css_properties_scrollbar-gutter <-- only safari 18.2 and newer support it
no, using chrome.
where can we see this live?
can you provide a codepen or stackblitz or jsfiddle with the minimal code needed to trigger that problem?
I was able to fix it
the issue was not there in firefox. Then i realised its probably because the accordions collapse immediately, and the browser goes back and forth in deciding if the scroll bar is needed or not
fixed it by adding a transition property to the max-height of the accordion. It now gradually transitions to its max-height
that is an interesting fix
sounds like a chrome bug if what you said is true
(i'm not doubting you: just can't confirm the issue is gone since there's no live version)
but hey, that was really nice thinking
Thank you. Appreciate it