Bootstrap Modal sitting behind Backdrop in Chrome

Question

I am using Twitter Bootstrap, (CSS and JS).

The problem comes from the Modal plugin, it's working fine on Firefox and IE but displays badly in Chrome: the Modal successfully pops up, but is hidden behind the modal-backdrop. This means that it becomes impossible to fill in the form or see the text contained in the Modal box.

It seems to be working fine on the Bootstrap website ( http://twitter.github.com/bootstrap/javascript.html#modals ) so I figured it could be related to a known bug with Chrome?

I've searched a solution without success. I didn't modify any of the Bootstrap CSS or JS.

What did I miss?

Solution

The style -webkit-overflow-scrolling: touch; in section#maincontainer is causing this to happen as it seems to be conflicting with overflow: auto.

I believe that -webkit-overflow-scrolling: touch; is supposed to be used to provide touch screen scrolling overflow within elements that use fixed positioning - so I don't think you need to apply it to section#maincontainer.

You might however want to apply it to modal-body as the parent uses fixed positioning and the content may overflow.

http://css-tricks.com/mobile-webkit-overflow-scrolling/