Hacker News new | ask | show | jobs
by mmccaff 5011 days ago
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?

1 comments

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...