Update _modal.scss

[zizoclimbs]

1- Fix ".modal-dialog-centered" class in mobile browsers as its not exactly centered because the browser add the height of "::before" to the content.
2- Remove ".modal {overflow-x: hidden;overflow-y: auto;}" it makes the modal content scrollable in mobile browsers if you tried to drag it.

[MartijnCuppens]

Hi @Achmed4,

• Could you provide a demo of what this fixes?
• We try to avoid hacks like @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {, we should have a look at fixing this somehow else

[zizoclimbs]

Hi @Achmed4,

• Could you provide a demo of what this fixes?
• We try to avoid hacks like @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {, we should have a look at fixing this somehow else

Hi @MartijnCuppens

Please, Check this URL for video demo

As you can see when you first open the modal its not centered vertically and also if you tried to drag its content it will move.

This media query works only on IE and ::before styles are necessary for IE to center the modal.

[MartijnCuppens]

@ysds, I can recall you applied some magic to center the modals in IE, could you check out what's going on here?

[ysds]

Dont remove these, because cause scrolling issue, see https://deploy-preview-30003--twbs-bootstrap.netlify.com/docs/4.3/components/modal/#scrolling-long-content and click the firse "Lanch demo modal".

[zizoclimbs]

We can fix this by setting the code below on the "modal-body"
.modal-body { overflow-y: auto; max-height: 65vh; }

[zizoclimbs]

Or we can extend ".modal-dialog-scrollable" placeholder inside our modal-dialog by default. It won't affect anything.

[ysds]

Modal scrolls entirely by default. There are no plans to change this behavior.

[zizoclimbs]

But this behavior causes the issue in the video. and what about the vertical centering and IE?

[ysds]

Removing L11-14 has nothing to do with the problem in your video.

2- Remove ".modal {overflow-x: hidden;overflow-y: auto;}" it makes the modal content scrollable in mobile browsers if you tried to drag it.

It is a browser bug, see https://getbootstrap.com/docs/4.4/getting-started/browsers-devices/#overflow-and-scrolling

[ysds]

We try to avoid hacks like @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {, we should have a look at fixing this somehow else

I found a solution without CSS hack. I'm going to create a new PR, please see it. So close this.