Bootstrap Modal sitting behind backdrop in Chrome

问题:

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 ?

回答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/