Wikia/app — pull request #3321 by BladeBronson (2014-04-07 20:59:47+00:00)
Title: VE-857: Background gradient showing above VE content area

https://wikia-inc.atlassian.net/browse/VE-857

When we built focus mode for VE/Oasis, some of Oasis' z-indexes had to be altered while in the editor. This change caused a problem with the background image gradient showing above the content area when in the VisualEditor in Safari.

The visual stacking order should be:
1. Background image (admin-uploaded big background image)
2. Background image gradient at higher resolutions (this is the stripe of color in the middle when the two background halves split)
3. Wikia page background

Currently the background image and background gradient are in the same stacking context and using -2 and -1 z-indexes. These are perfectly valid and have the benefit of rendering below other content no matter the order in the DOM. This is important because the two halves of the background image are achieved with before and after pseudo elements on the body tag, making one half the first element in the DOM and the other half the last. Since the background image gradient is its own element and appears early in the DOM, it doesn't require a negative z-index (or any z-index at all), so I've removed it and bumped the background image's -2 z-index to -1.

The Wikia page background currently has a -1 z-index. This becomes a problem in VE's focus mode when its parent, Wikia page, has its z-index set to auto, thus putting the Wikia page background into the same stacking context as the other stuff. This one is very similar to the Background image gradient: it is its own element and appears early in the DOM, so its z-index doesn't seem necessary.

I'd like @vforge and @sebastian-wikia to look at this since they worked on background.scss.