visually-hidden text in table shows body scrollbar in Chrome

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have a horizontally scrolled, wide table that contains visually-hidden text in the table head. This produces an unexpected body scrollbar in Chrome. Observation:

• Does not occur in Firefox.
• Does not occur when there is no visually-hidden text.
• Does only occur when the visually-hidden text is in the last columns that exceed the scrolled wrapper width.
• Does not occur when "position: fixed" is used for visually-hidden (but I guess this is not an option for a fix).

I don't know a workaround so far that doesn't have downsides for a11y.
Maybe this is a bug in Chrome itself.

Reduced test cases

See this reproducing example. Open in Chrome and reduce the window width (e.g. by dev tools) until a scroll bar appears for the body (ignore the table wrapper scrollbar, this is intended). Scrolling the body, you can see that the table wrapper does not exceed the expected width.

https://codepen.io/s4R8/full/myJGwrY

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3

Start with the linked CodePen reproduction in Chrome at a narrow window, then inspect the table wrapper and visually-hidden text in the Bootstrap 5.3 context. Compare the behavior with Firefox and with the visually-hidden text removed or positioned fixed. Done means the accessible hidden text remains while the body scrollbar is not unexpectedly introduced.