Modal scrolls down the page

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/

I can't reproduce with Firefox on Windows 10.

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

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

IE11/Edge/Firefox/Chrome:

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

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

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...

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.

@JyotirmoyGoswami

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

Navigation Menu

Repository navigation

Modal scrolls down the page #27176

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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`)

Modal scrolls down the page #27176

Description

Activity

XhmikosR commented on Sep 10, 2018

Johann-S commented on Sep 10, 2018

ysds commented on Sep 10, 2018

XhmikosR commented on Sep 10, 2018

Joyrex commented on Sep 19, 2018

helmutgranda commented on Sep 25, 2018

JyotirmoyGoswami commented on Nov 6, 2018

ysds commented on Nov 6, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions