Modal window moves slightly sideways when opening and closing in browser with scroll bar.

[moonjoungyoung]

As you can see, when you open and close a modal window, the scroll bar disappears and then rises, and the window moves slightly.

Detected in Windows 10, Chrome 65.

It is not observed on MAC, which is thought to be due to the render method of the scroll bar.

[nbudin]

Hi @moonjoungyoung, thanks for the bug report!

If you go to http://getbootstrap.com/docs/4.1/components/modal/#live-demo and click on "Launch demo modal", do you see the same behavior on Windows? The reason I ask is that as far as I can tell, react-bootstrap4-modal doesn't do anything that would affect this, so the behavior may be an underlying issue in Bootstrap itself.

[moonjoungyoung]

Hello @nbudin, Thanks for the comment.

This does not happen in pure versions, such as GIF above.

[moonjoungyoung]

Hello @nbudin, can I know how is it going?
Hope you have a good start of the week.

[nbudin]

Hi @moonjoungyoung! I don’t have access to a Windows machine, so I have no usable way to reproduce the issue myself. If you’re able to discover the cause and figure out how to fix it, I would be very glad to review a pull request, but as it stands I don’t think I can fix this myself.

[ShadTK]

Hi
I can confirm the same happened to me using Chrome Version 71.0.3578.98 (Official Build) (64-bit) and MacOS High Sierra Version 10.13.6

Unfortunately I cannot share the code where i`m having this issue with. I might try to make a demo later, to help with investigations. Still, just wanted to give a heads up that this is happening on macOS as well

[bohdanbirdie]

The same thing happened to me
MacOs Mojave
Google Chrome

---

Update
Looks like that's because of my styles.

[nbudin]

@bohdanbirdie Would you mind saying more about what in your styles caused the problem? It might be helpful for other people dealing with this issue.

[bohdanbirdie]

@nbudin np
Commented styles were removed

.modal-dialog {
  max-height: 90%;
  max-width: $modal-width;
  // width: 130%;
  // display: flex;
  // margin: 0;
  // justify-content: center;
  // align-items: flex-start;
}

[bohdanbirdie]

@nbudin Sorry, misunderstood your message
I'm not sure about the real reason but seems like those css styles above were causing the problem.
Thanks for your package by the way, very handy
I was replacing Reactstrap and it would take a while for me implementing a modal from scratch

[marta-kochjarova]

For anyone having a similar issue - I had this issue where my website moved sideways on opening and closing the modal and the issue was because i had a style like this:

*{
   transition: all 0.3s ease-in-out;
}

which caused that when i opened the modal, the scrollbar disapeared, website widened and then a padding-right:17px was added to the body element by bootstrap javascript and the whole thing was animated.
I solved the issue by adding a style:

body{
    transition: padding-right 0s ease-in-out !important; 
}

so the resizing happened instantly and there are no visual effects of it happening.