I have a problem since some time, Firefox stopped interpreting the colors of my navigation images in my game correctly. There are some usually dark areas shown as white (and those are not the transparent areas).
This is how it looks now: 
for example the production.png image is with white background now, while the search.png works fine (with transparency)
I already tried to compare the output of imagemagic's identify -verbose production.png with search.png but I found no clue, this is the diff output:
Image: production.png | Image: search.png
Geometry: 39x39+0+0 | Geometry: 40x39+0+0
Pixels: 1521 | Pixels: 1560
mean: 100.691 (0.394867) | mean: 114.719 (0.449879)
standard deviation: 84.552 (0.331576) | standard deviation: 92.5997 (0.363136)
kurtosis: -0.86307 | kurtosis: -1.20889
skewness: 0.600582 | skewness: 0.428943
entropy: 0.626761 | entropy: 0.640743
mean: 199.804 (0.783545) | mean: 195.449 (0.766466)
standard deviation: 100.551 (0.394318) | standard deviation: 103.445 (0.405669)
kurtosis: 0.00158551 | kurtosis: -0.316896
skewness: -1.38079 | skewness: -1.26072
entropy: 0.263538 | entropy: 0.263553
Colors: 320 | Colors: 316
...
Page geometry: 39x39+0+0 | Page geometry: 40x39+0+0
png:IHDR.width,height: 39, 39 | png:IHDR.width,height: 40, 39
signature: 9995b265a15a8c420fb52a3a2394c1 | signature: 55dfc1232b6f0d2684c3ff47e78cfc
filename: production.png | filename: search.png
Filesize: 1386B | Filesize: 1406B
Number pixels: 1521 | Number pixels: 1560
I tested a lot and I am not sure if it has to do with transparency at all, I set up a simple html-test here:
- https://spacetrace.org/error_test.html
which shows only the one image that has its black part inverted to white. the image itself is ok: - https://spacetrace.org/pics/navigation/buttons/production.png
The code is really simple now:
<html><head>
<style>
.works,.worksnot{
background-repeat:no-repeat;
height:50px;
background-image:url('pics/navigation/buttons/search.png');
}
.worksnot{
background-image:url('pics/navigation/buttons/production.png');
}
</style>
</head>
<body>
<div class="works"></div>
<div class="worksnot"></div>
<br><br>plain it works:<img src="https://spacetrace.org/pics/navigation/buttons/production.png">
</body></html>
These are the original files:
- https://spacetrace.org/pics/navigation/buttons/production.png
- https://spacetrace.org/pics/navigation/buttons/search.png
And they work in all browsers, except the latest Firefox on Android (a few weeks ago, Firefox on Android worked just fine too).
It seems to be a known bug (or feature) of Mozilla ^^.
See https://support.mozilla.org/bm/questions/933016 and here: https://groups.google.com/g/mozilla.dev.apps.firefox/c/gnpS9x0JJ0g?pli=1
So you might fix it by using a solid background color to be on the save side.