672028 - White gradient on the window background with Aero

Status: UNCONFIRMED

(Firefox :: General, defect)

Description

[Luís Miguel [:quicksaver] (not reading bugmail)]

Attachment: Top: window is focused; Bottom: window is not focused

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0
Build ID: 20110713171652

Steps to reproduce:

You need to set something to be transparent to see the window background, in my case I set the sidebar background as completely transparent.

There is a weird white-ish gradient when the firefox window is focused. The same gradient is still there when the window loses focus, only much fainter.

This only happens in Firefox 6 beta, Firefox 5 did not display this gradient. I haven't tried other betas or auroras, only the latest Firefox 6.0b2. Also this seems to be related with Windows Aero (I'm on Windows 7 64-bit) as if I turn off the aero effect the gradient will not be shown, in my Windows XP the gradient also doesn't appear. The screenshot is from my firefox profile which is somewhat customized but I've tried this in a clean profile as well and it also happens (haven't tested with personas).

Did some testing with DOMInspector and Stylish to figure out where this was coming from, by setting the following css rule with stylish the gradient disappears:

notificationbox stack[anonid="browserStack"] * { display: none !important; }

which leads me to believe it has something to do with the stack or browser elements, probably the stack as if you set only the browser display to none and there's something else in the stack, the gradient will still appear; curiously enough this also removes the gradient:

notificationbox stack[anonid="browserStack"] * { opacity: 0.99 !important; }

Also, in a blank tab (about:blank) there is no gradient either.


Actual results:

There is a weird white-ish gradient when the firefox window is focused. The same gradient is still there when the window loses focus, only much fainter. (see screenshot)


Expected results:

No gradient should be there, like in previous versions of firefox.

Comment 1

[Dave Hennings]

That looks like the white gradients that all Windows Aero windows have. See the attachment "White gradient on Windows Aero windows".
However, it seems like Firefox is supposed to remove those gradients if the glass is wide enough. This can be seen by applying the following CSS code into a clean profile (tested with Firefox 5): #main-window{margin-left: 10px !important;}. That's good, since it lets theme developers glass vertical elements, when the gradients are NOT wanted.
Anyways, it's buggy. I can partly confirm this, on Firefox 5:
Steps to reproduce:
1. Apply the CSS code shown above.
2. Notice how the white gradients to the left and right of the window disappear, as the should because that seems to be a Firefox feature.
3. Go to a page with (Adobe?) Flash content, like http://www.danbrown.com/ or http://www.youtube.com/watch?v=VTO5yiN1b-I.
Result: As long as the Flash content stays visible, the white gradients re-appear. (Try hiding the Flash content via CSS or by scrolling away from it to see how the white gradients disappear again.)
Expected result: The white gradients should still be gone.

Perhaps it's different in Firefox 6.

Comment 2

[Dave Hennings]

Attachment: White gradient on Windows Aero windows

Comment 3

[Luís Miguel [:quicksaver] (not reading bugmail)]

I'd never noticed that the gradient appeared when there was flash content displayed. I just did some extra testing with other versions, the gradient does appear when there is flash content displayed in firefox 4 and 5, maybe it appears in other situations as well? With firefox 6 onwards the gradient is there regardless of there being any flash content.

Comment 4

[Dave Hennings]

(In reply to Quicksaver from comment #3)
> I'd never noticed that the gradient appeared when there was flash content
> displayed. I just did some extra testing with other versions, the gradient
> does appear when there is flash content displayed in firefox 4 and 5,
At last someone can confirm this! Phew!

> maybe it appears in other situations as well?
I have found none.

> With firefox 6 onwards the gradient
> is there regardless of there being any flash content.
That's not good. This bug must definitely be solved! I have two suggestions here:
1. Let the gradients disappear when the glass is wide enough, as it seems to work in Firefox 4 and 5 (but fix the Flash content bug). Or:
2. Let us turn them off some way, like via a setting.

Comment 5

[Dave Hennings]

I just tested with Firefox 6. Using this ...:
#appcontent{ -moz-appearance: none !important; }
... seems to completely remove the white gradients (the flash problem is gone).
So it seems like Firefox 6 is perfect - the white gradients are displayed perfectly, and can easily be removed perfectly. I'd say this bug is solved.

Comment 6

[Bret Schmerker]

I concur with [url=[e-mail]]Dave Hennings[/url]' findings.  I ran into a transparent-text problem running Ning® Chat (for any Ning® subsite Member, *.ning.com/chat/index/popOutWindow where *=the Creator of the subsite) in the sidebar of Firefox 6.0, which is indeed related to Microsoft® Windows® 6-up with Aero per [url=mailto:[e-mail]]Quicksaver[/url].  Will see about the results of:
[code]#appcontent{ -moz-appearance: none !important; }[/code]
added to about:config my installation.

Comment 7

[Luís Miguel [:quicksaver] (not reading bugmail)]

Sorry for my delay in replying to this, was away and unable to properly test. Dave Hennings' suggestion for #appcontent{ -moz-appearance: none !important; } indeed works and removes the white gradient in apparently every situation.

I will not go as far as suggesting this as a default firefox configuration, since it's not an easy situation to run into or even notice, but at least a heads up somewhere for theme and extension developers that deal with transparencies would surely be appreciated.

Comment 8

[Luís Miguel [:quicksaver] (not reading bugmail)]

Attachment: screenshot of MDN's homepage with a see-through header (should be opaque and black)

Comment 9

[Luís Miguel [:quicksaver] (not reading bugmail)]

I just found an unwanted side-effect of using #appcontent { -moz-appearance: none !important; } to remove the white gradients. It can render certain parts of webpages transparent, see screenshot of the MDN page, https://developer.mozilla.org/en-US/, the header should be totally black and yet you can clearly see the desktop behind it.

This doesn't happen 100% of the time though but is still easily reproducible, the screenshot is from my heavily customized firefox profile but I've also tested it on a clean profile with only Stylish installed to test it and it also happens.

Another example is the homepage of AiOS: http://firefox.exxile.net/aios/ , the orange header can become see-through just like mdn's screenshot, just not as often so it's harder to reproduce.

It's still a good workaround for the white gradients but still not perfect I believe.

Comment 10

[Dave Hennings]

In Firefox 6.02 with a clean profile with this ... :

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appcontent{ -moz-appearance: none !important; }

... in userChrome.css at https://developer.mozilla.org/en-US/ after having clicked the "X" in the upper right corner (below "COMMUNITY") (see Quicksaver's attachment two posts up), I can confirm the new problem. I also noticed that hovering on some of the links at that page prevented the unwanted effect.

Comment 11

[Luís Miguel [:quicksaver] (not reading bugmail)]

Attachment: comparative screenshot of viewing a pdf file with/without the css statement

Also using the #appcontent { -moz-appearance: none !important; } completely screws up the pdf viewing screen (see screenshot). This solution is definitely a no-no.

Comment 12

[bnafta]

screenshot of this bug -> http://imageshack.us/photo/my-images/402/problemafirefox.png/

after disable aero in windows 7 64bit, the problem disappears.

sorry, my English is still a little bad.

Comment 13

[Dave Hennings]

I think that Firefox should do as Windows: If the glass is wide enough, don't draw the white gradient. The gadgets window in Windows Vista/7 is an example of this; the entire window is glassed, and therefore there is no gradient, since that would look odd. Why not implement something similar for Firefox? Actually, the only time one does not want the white gradient, is when you have wide areas of glass, for example a glassed, vertical tab bar. Say, if the white gradient would be wider than perhaps 20px, don't draw it.