Clicking outside vertically centered Modal with static backdrop results in unwanted vertical scrollbar glitch

Steps to reproduce:

• Navigate to https://getbootstrap.com/docs/4.5/components/modal/#static-backdrop.
• Click ‘Launch static backdrop modal’ button.
• Open dev tools and inspect displayed modal div with modal-dialog class.
• Add modal-dialog-centered class to this div (the documented way to create a vertically centered modal).
• Exercise the static backdrop feature by clicking outside the modal.
• Note that the modal’s scale animation causes a vertical scrollbar to pop in and out of existence. This also pushes the modal left creating an undesirable UI experience.

Reproduced using:

• Bootstrap version: 4.5
• OS: Windows 10
• Browser: Chrome 86.0.4240.75

[cduff]

I’m currently working around this issue by modifying Bootstrap’s CSS so that the scale animation occurs on the modal-content div rather than the usual modal-dialog div.

Sass:

.modal {
  .modal-content {
    transition: transform 0.3s ease-out;
  }
}
.modal.modal-static {
  .modal-dialog {
    transform: none;
  }
  .modal-content {
    transform: scale(1.02);
  }
}

[rohit2sharma95]

It only happens when opening dev tools and manually increasing the value for the scale (Closing the dev tools does not reproduce it). Generally, it cannot be reproduced.