I ran into the z-index issue yesterday with an internal application that uses Twitter Bootstrap. It had been working perfectly for months, and then became unusable. After the new Chrome was pushed out, Bootstrap's modal dialogs were hidden behind the backdrop and therefore inaccessible.
It might have been an edge case related to the layout of this application, but ultimately I ended up having to patch bootstrap.js to fix it. I felt bad about editing bootstrap, but should anyone else need a temporary(?) fix, it came down to this code in bootstrap.js
Comments
I ran into the z-index issue yesterday with an internal application that uses Twitter Bootstrap. It had been working perfectly for months, and then became unusable. After the new Chrome was pushed out, Bootstrap's modal dialogs were hidden behind the backdrop and therefore inaccessible.
It might have been an edge case related to the layout of this application, but ultimately I ended up having to patch bootstrap.js to fix it. I felt bad about editing bootstrap, but should anyone else need a temporary(?) fix, it came down to this code in bootstrap.js
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
- .appendTo(document.body)
+ .insertAfter(this.$element)
That change had been discussed even before the Chrome changes, here
https://github.com/twitter/bootstrap/pull/3825
https://github.com/twitter/bootstrap/issues/3217
So, is this a Chrome bug, or a new spec that's being followed?
If I understand correctly it's the latter. Make sure the z-index is set on the position:fixed element, not elements inside of it. See http://updates.html5rocks.com/2012/09/Stacking-Changes-Comin...