Open modal is shifting body content to the left

[AS-OLD]

When launching the modal component (http://getbootstrap.com/javascript/#modals) the entire content will slightly move to the left on mac OS (haven't tried it on windows yet). With the active modal the scrollbar seem to disappear, while the content width still changes.

You can observer the problem on the bootstrap page

[jamescostian]

I can confirm that I see this also on Chrome for Linux, both on getbootstrap.com and on the 3.0.0-wip branch

[cvrebert]

@jamescostian If you mean on the CDN, that's outdated. Could you clarify whether you mean git or the CDN?

[jamescostian]

@cvrebert Via git. I even rebuilt the JS, and it's still doing this.

[mdo]

Yup, saw this as well when I enabled scrollbars all the time in OS X. /cc @fat

[fat]

kicking this back to @mdo – how twitter gets around this is they add a 15px margin to the right. and some other tricky css hacks…

@mdo you can just use the modal-open class to style the body as twitter has

[chrisseaton]

This fix causes the page to jump 15px to the left when a modal is opened on desktop and iOS Safari. In those environments there is normally no scrollbar to cover - and who says a scrollbar is always going to be 15px?!

Before (blur to cover private content):

(image removed)

After:

(image removed)

You can see the extra 15px on the right - look at the navbar. What isn't so obvious is that the body text has also moved to the left. Same problem on desktop Safari.

[cvrebert]

Also happens on OS X Chrome.

[Merg1255]

This is #9886

[tnorthcutt]

Confirmed on OS X 10.8 Chrome, when scroll bars are always on:

Also confirmed on Windows 7 Chrome & IE10.

[mdo]

Okay, so what Twitter does now is they run a script to determine the width of the scrollbar and then apply conditional CSS to adjust the modal and page contents accordingly. They know when say OS 10.8 has scrollbars visible when scrolling vs always visible, for example. It's truly the only way of making it happen.

So, no matter what, we need some scripting to help us apply the styles.

/cc @fat

[Merg1255]

@mdo the modal already needs some scripting to be functional.

[luishdez]

Oh crap! duplicated multiple times!, my bad. Apologies

[huwcbjones]

EDIT:
Modal was created from the example in the docs and I copied the repo and used the css and js files from the dist directory.

After lots of tweaking and testing, the shift still occurs (on Win7 Pro Chrome (29) and Firefox (22) and iPad Safari (6.1.3)), I came to this conclusion:

If the body has already scrolling, there is no shifting, but, if the modal overflow-y is 'scroll' and the body hasn't got a scrollbar, then it shifts.

[Merg1255]

There are some pixels added even if the body already has scrolling, and that's on 15" screens.
For some reason those pixels are added on the body, even if the modal can fit inside the current screen size.

[Merg1255]

http://i41.tinypic.com/2s0e05x.jpg

[ctaepper]

+1 form me too!

i'm on osx:

using firefox, the everything seems ok, the scrollbar takes an actual 15px of the viewport. when the modal is opened, the scroll-y gets hidden and the 15px shift correctly keeps the website in place (if the shift wouldnt be there, the website would jump 15px to the right).

using chrome, its different. the scrollbar in chrome does not take an actual 15px of the viewport... its like an overlay here. opening the modal still triggers the 15px shift, which is in that case not correct

maybr this clarifies the issue

[jamesmfriedman]

Just confirming that this is still an issue. Tested on OSX safari, chrome, firefox.

[ghost]

This does not happen with v2.x.x So can't we use the same method to display the modal as in 2.x.x?

[chrisseaton]

As far as I know the reason it's different to v2 is so that scrolling works better - you can now scroll the page as normal, with the modal setting the limits, rather than having to scroll within the modal if it overflows, which on scrollbar-less systems is particularly bad as you would never know there was overflow-scroll hidden content as you can see the whole model so why would you think some part of it needed to be scrolled?

I know that the final RC worked perfectly for me, and that this change came between that final RC and the release.

My proposed solution is to make the fade cover the whole page, and let you scroll the page as normal, with the modal given an absolute position rather than its own scroll area within the fade. #9339

[cjwprostar]

I'm still getting this issue on OS X 10.9.1/Safari 7.0.1 and Firefox 27.0.1 using master.
I think I tracked it down to when both the html and body are set to height: 100% which is how I'm making my sticky footer work.

[sirNemanjapro]

+1

[cvrebert]

Closing again per #13103.

Fixed by 0907244 in v3.2.0.

[yshing]

On Bootstrap 3.1.1, still got the issue.
[Note from the Bootstrap Core Team: That's because the bugfix targets Bootstrap v3.2.0.]

And fixed with following code:
---------- Code ----------
.modal{
overflow-y: auto;
}
.modal-open{
overflow:auto;
overflow-x:hidden;
}
---------- /Code ----------
---------- Bootstrap CSS cause this issue ----------
/* Bootstrap.css line:5087 /
.modal {
overflow-y: scroll; / I overwrite it with auto /
}
/ Bootstrap.css line:5084 /
.modal-open {
overflow: hidden; / I overwrite it with my original overflow settings */
}
----------- Bootstrap CSS cause this issue ----------
Caution: some of my * seems to be eaten by github. be careful....

[sirNemanjapro]

@yshing great work 👍

[cvrebert]

@yshing On what OS and browser?

[yshing]

@cvrebert ON OSX 10.9.2 CHROME

[mdo]

I'm not surprised v3.1.1 has an issue btw—this fix won't land until v3.2 ships.

[cvrebert]

🤦 Gah. We really ought to 🚢 that soon.

[cod-1]

@yshing Maintenance done successfully! ;)

[leniel]

@yshing great work 👍 You'll also help people here while 3.2 is being baked.

[phpMagpie]

Thanks @yshing

[guthyerrz]

I fixed it by adding a width:100% on the body css.

[OlyTsav]

We fixed this by commenting out some of the previous css fixes. In boostrap.css comment the following shown in my screenshot.

[cvrebert]

Locking since this is fixed in v3.2.0 by 0907244 / #13103.