Modal scrolls down the page

[ysds]

The occurrence condition is not clear, but when open a modal, the page may scroll down. It appears to be affected by the window size or length of the page. Often it happens when the window size is small, it may occur even when the window is wide.

Windows 10 / macOS (Show scroll bars - always)

https://getbootstrap.com/docs/4.1/components/modal/

[XhmikosR]

I can't reproduce with Firefox on Windows 10.

[Johann-S]

I wasn't able to reproduce it on macOS High Sierra with Firefox 61 (thanks to BrowserStack 😄)

[ysds]

I tested 4 browsers on Windows 10. It seems to happen only in Chrome.

IE11/Edge/Firefox/Chrome:

[XhmikosR]

Maybe try Chrome canary/beta etc and if it still happens then might be a good idea reporting it.

[Joyrex]

Confirmed in latest Canary build (Version 71.0.3556.1 (Official Build) canary-dcheck (32-bit)) that it still happens.

[helmutgranda]

When a scrollbar is present modal adds padding the size of the scrollbar (~15px), every browser is happy to oblige except Chrome...

Measurements are also correct between Chrome Canary/FireFox

bootstrap/js/src/modal.js

Lines 454 to 458 in 0350858

	const actualPadding = document.body.style.paddingRight
	const calculatedPadding = $(document.body).css('padding-right')
	$(document.body)
	.data('padding-right', actualPadding)
	.css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)

I went ahead and removed the dynamic padding added for testing purposes and in fact Chrome is happy with 0px padding applied to the body but now all the other browsers complain.

Still looking...

[JyotirmoyGoswami]

I am seeing another behaviour in iphone 5s chrome that the modal background gets scrolled when modal overlay is being scrolled. My believe that it happens in all ios phones.

[ysds]

@JyotirmoyGoswami That is a known issue -
https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile