On March 13, a new Firefox version came out once again, namely version 11. Apart from the fact that I find their insanely small update intervals completely over the top – to me it seems like version 3.6 was only a few weeks ago – Mozilla now started to build in new “Annoyances” with each release, in a somewhat Windows-like manner. :twisted:

In version 11 there is again a totally unnecessary feature: If you look at a picture via right click → “View image”, it is no longer displayed on a white background at the upper left corner of the browser window, but on a dark background and centered in the middle of the window. At first I thought, “Damn, which of my stupid addons is screwing up here?” But then I realized that this was, in all seriousness, a native Firefox “feature”.

Although I could not for the life of me imagine that the Firefox developers don’t have anything more important to do than to “improve” such details, I tried to stay calm. “It’s not that bad”, I thought. “Pure matter of habit. I might even like it soon.” But then I clicked on a transparent PNG!

Great, isn’t it? And so easy to read! ;) But well, I don’t want to be hard on the programmers. Users wanting to look at a dark image with transparent background is such an unlikely scenario, they really could not have foreseen it! [Irony off]

Solution: Addon or userContent.css

Anyway, I quickly looked for a way to get rid of this totally awful behavior. First I stumbled across the addon “Old Default Image Style“, which someone kindly wrote for the sole purpose of undoing this idiocy in a simple and quick way.
But I personally didn’t even want to install an addon for such a rubbish. So I edited my userContent.css instead, so that the image display behaves the way it did before. Here’s how:

1. click the Firefox button in the upper left, then click “Help” → “Troubleshooting Information”
2. the click the button “View folder”
3. open the folder “chrome”, then open the file userContent.css or create it, if it doesn’t exist
4. add the following code to the file:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("((.*\\.(png|apng|jpg|jpeg|gif|tiff|bmp))|(^data:image\\/.*))(\\?([^#]*))?(#(.*))?") {

	html > body {
		background-color: #ffffff !important;
	}

	html > body > img:only-child {
		box-shadow: none !important;
		margin: 0 !important;
	}

}

After saving the file and restarting Firefox, the image display should work as usual again. The code can be customized as desired, of course – for example, I chose a very light gray (#fafafa) as the background color instead of pure white. And if only the color bothered you, but not the centering of the image, you can simply leave out the line “margin: 0 !important;”.
As a result, transparent images will finally be recognizable again! ;)