Everything starts grayed out:

enter image description here

Clicking anything causes the popup to disappear.

Works fine on meta, though.

This is the same z-index related grey box issue that was fixed and then re-broken on meta. This is also an issue on Firefox 27 (I think any browser supporting z-index will have the issue). – jmac Mar 9 '14 at 23:36
up vote 3 down vote accepted

I have pushed a fix for this to our dev server. The change will be live after our next production build.


The bug seems to be caused by the following CSS rule:

#header {
    z-index: 2;

Why is this rule a problem? It's because any element with a z-index value other than auto establishes a new stacking context that subsumes all elements under it in the DOM. And, as it happens, the image upload popup is, for some reason, nominally located inside the header:

Screenshot of developer tools

while the semitransparent box used to "gray out" the rest of the page is located outside it.

Thus, it doesn't really matter if the popup div has a z-index of 10, 100, 1000 or 1000000; as long as it's located inside the header in the DOM, and as long as the header has a z-index value of 2 (and thus defines a new stacking context), the popup also behaves as if its z-index was 2 with respect to everything outside the header.

The proper way to fix this would be to change the popup-generating code to make sure that both the popup itself and the gray background behind it are injected into the same place in the DOM, and thus into the same stacking context.

In the mean time, however, a quick and dirty fix would be to just remove the z-index: 2 value from the header. At a glance, I can't see any obviously harmful side effects from this.

Edit: Ah, wait, I do see an issue: the small paperclip / oval thingies on the top right corner of the page need the z-index boost to render on top of the content area. Fortunately, this is easy enough to fix with the following CSS rules:

#header { z-index: auto }
#header:after { z-index: 2 }

Ps. Since Stéphane Martin's fix doesn't seem to have gone live yet, I've gone ahead and included the two CSS rules above in the SOUP v1.10 release. Just to be safe, they're currently only applied to workplace.SE; if you find any other SE sites affected by this bug, please let me (and the SE devs!) know.

At least in Firefox, I can change the z-index: 1000 to 0, and the grey box disappears. – jmac Mar 10 '14 at 2:31
@jmac: You mean the z-index on the gray box? Yes, because most of the page content is at z-index 1 (and the header is, currently, at z-index 2). But the point of the gray box is that it should be placed between the popup and the rest of the page, which the current styling (without the fix above) does not allow. – Ilmari Karonen Mar 10 '14 at 2:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .