Bootstrap Modal sitting behind backdrop in Chrome

Question

I'm using Twitter bootstrap, CSS and JS.

The problem comes from the Modal plugin, it's working fine on Firefox and IE but displays bad in Chrome : the modal successly pop up, but behind the modal-backdrop so it's impossible to use the form (contained in the modal box)

You can have a try by clicking the top right buttons : http://

It's working fine on bootstrap example page ( http://twitter.github.com/bootstrap/javascript.html#modals ) so I guess it's coming from my CSS

I've looked everywhere I could, but couldn't find anything suspicious. What did I missed ?

Answer 1

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/