Bootstrap 5 Scrollbar shakiness when hovering over elements (tabs)

[Reboot4X]

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]

Redirecting folks to #36584 since there's both a discussion and issue for this.