Bootstrap 5 Scrollbar shakiness when hovering over elements (tabs)

[Reboot4X]

Discussed in https://github.com/twbs/bootstrap/discussions/36564

^{Originally posted by Reboot4X June 13, 2022} This problem has manifested in various ways since Bootstrap 4. But lately I'm seeing it especially on a page that I have that has tabs for displaying additional content below some header type information. (Tested on Chrome 102.0.5005.63 and Edge)

The problem happens if you size the vertical height of the browser to 1154px or so (just enough to get the scrollbar to show) and then use the mouse to hover over the tabs (tabs 2 and 3 and back to tab 1) (I set my screen dimensions in F12 debug by sizing the screen to 1500x1154)

I created a code pen to illustrate this: (https://codepen.io/snmoore/pen/jOZXdgP)

It's evident that the scroll bar is appearing and disappearing, but unnecessarily as the selected tab hasn't changed from the hover. It's just changing the hover highlighting a bit. The hover doesn't appear to add any vertical margin or padding, so it seems odd that it is causing the scrollbar to hide and show.

Anyone have some insight on this?

[mdo]

I can't reproduce anything here—I don't see a scrollbar issue at any dimensions. Have a video of the issue by chance?

[mdo]

Closing as stale.