Opening a modal with scrollbar-gutter: stable shifts the page content and shows white (non grey-overlayed) gutters

Prerequisites

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

Describe the issue

When using scrollbar-gutter: stable (I use it on my root element), when I open a modal, the page contents shift slightly, and the gutter is shown as plain white instead of the expected gray overlay.

Reduced test cases

I couldn't make the example work in CodePen, but here's a minimum reproducer:

<!doctype html>
<html lang="en" data-bs-theme="auto" style="scrollbar-gutter: stable both-edges">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <link href="/static/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<main>
  <div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
      Open dialog
    </button>
    <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            Hi!
          </div>
        </div>
      </div>
    </div>
  </div>

</main>
<script src="/static/js/bootstrap.bundle.js"></script>

</body>
</html>

Before clicking the dialog:

firefox_2024-07-24_03-02-51

After clicking the dialog:

firefox_2024-07-24_03-03-18

I made a screenshot of the whole viewport, at the exact same place. We can clearly see from one image to the next, that the button shifted slightly to the left when the dialog was opened. Also there are some white gutters after the dialog is opened.

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

Windows

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

Firefox

What version of Bootstrap are you using?

v5.3

twbs / bootstrap