Padding problem when there is a forced scrollbar

Created by: Michael-Ziluck

There is an issue with the way modals add margins to account for the scroll bar. This issue occurs in the most recent releases of both Bootstrap 3 and 4.

When a browser is forced to display the scrollbar when the vertical content does not require the scrollbar, a padding-right is added to the body when it is not necessary.

Two jsfiddle examples are below that show the problem.

Bootstrap 4: https://jsfiddle.net/ziluckmichael/fh71sgo0/

Bootstrap 3: https://jsfiddle.net/ziluckmichael/nvz0ybux/

As you can see it adds padding-right to the browser when it is not required. Both examples use the default code almost exactly as it is off of the demo page.

Browsers Always Affected:

• Microsoft Edge 40.15063.674.0
• Google Chrome 71.0.3578.98 (Official Build) (64-bit)
• Firefox 64.0.2

Browsers Sometimes Affected:

• Internet Explorer 11.1508.15063.0

For IE 11, the issue does not occur on my test/demo of the problem, but it does occur on the actual production website where I discovered the issue originally. It appears this is because IE overlays the scrollbar and has it slowly disappear, while every other browser has it permanently on the screen.