2

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: some images are white

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:

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:

And they work in all browsers, except the latest Firefox on Android (a few weeks ago, Firefox on Android worked just fine too).

rubo77
  • 19,527
  • 31
  • 134
  • 226
  • FYI - they don't work on Firefox for windows either – Jaromanda X Oct 06 '20 at 08:36
  • does adding style `img { background-color: rgba(0,0,0,0); }` help? – Jaromanda X Oct 06 '20 at 08:41
  • 1
    On my old version of Firefox desktop, the default image css for transparent is defined in `chrome://global/skin/media/TopLevelImageDocument.css`. This actually sets a background image of `chrome://global/skin/media/imagedoc-lightnoise.png` (which is a white square) and `hsl(0,0%,90%)`. This is in a style class `img.transparent`, so you could overwrite this with: `img.transparent {background-color:transparent;}` – ATD Oct 06 '20 at 09:09
  • @JaromandaX, I don't think so, I added it in the style and emptied the proxy-cache, It didn't change it on Android FF – rubo77 Oct 06 '20 at 09:54
  • @ATD I also tried `img.transparent {background-color:transparent;}` no change on Android FF either – rubo77 Oct 06 '20 at 12:28
  • Can you see the browser console in Android FF? – ATD Oct 06 '20 at 12:34
  • no console. It is so strange, if you log in and then open the navigation.php on its own, you see, that half of the images have a white BG now: https://spacetrace.org/navigation.php and in the source you see, that your suggestions are included now – rubo77 Oct 06 '20 at 12:38
  • Ok - first try to enable the console. Go to about:config and find the `devtools.errorconsole.enabled` setting - set that to true. Close and re-open FF. Then, open the image *directly* into the browser - ie, not as part of a page. The console should display to you the settings that FF is adding to the image. – ATD Oct 06 '20 at 12:40
  • ps - I don't have Android FF - but this is how I get the default styles in Desktop FF or Chrome etc – ATD Oct 06 '20 at 12:41
  • I've looked at a few browsers - some add a background colour, so `img {background-color:transaparent;}` should clear those. Chrome adds a gradient to the img - you could try clearing that with `background-image: linear-gradient();` – ATD Oct 06 '20 at 12:57
  • @JaromandaX: Is the problem gone on your windows then?`I added your suggestion – rubo77 Oct 06 '20 at 14:57
  • @ATD on Chrome, there is no problem. But why do the images behave differently? The programming of the navigation treats all images the same and they are all transparent – rubo77 Oct 06 '20 at 16:11
  • It's all down to the browsers and their default stylings. The object itself won't change, but browsers have defined default styles for just about everything. Normally, it's just for things like `table` or `div` (which are easy to work out) but, from what I can see, it does the same for loaded objects as well and that is more difficult to track down as you can only see the default styles by loading the object directly from the address bar and checking the console. I'm working with an old version of Chrome, so things may have changed, but it may be worthwhile adding in that css anyway? – ATD Oct 06 '20 at 16:18
  • Strangely now one of the compromised images doesn't show in false colours any more: the production.PNG seems to have fixed itself! ?#!@! – rubo77 Oct 09 '20 at 05:18
  • Maybe Firefox somehow compresses the images for caching? And it was a mistake of the compressor. Ps your game looks interesting! – Jorjon Oct 12 '20 at 17:42
  • 1
    Try converting those PNGs to [webp](https://en.wikipedia.org/wiki/WebP). It may reduce bandwidth and the transparencies may work better. Might be worth a try. – Lonnie Best Oct 15 '20 at 05:49
  • @LonnieBest: good Idea, I tried it, but still the same effect, the transparent color ist still shown as white instead – rubo77 Oct 18 '20 at 06:50
  • the production image is inverted again. I setup a test page (see my update) – rubo77 Oct 18 '20 at 14:38
  • @rubo77 That being this case, it just seems like there must be a container with a white background in one or more of the multiple elements that ultimately contain these images. Parent container's css should be `background-color: transparent` and if anyone of those containers has a background, you should see the background that is layered closest behind your images. Watch out from browsers setting a default background color of white even when you didn't specify that. You may be dealing with a crappy browser bug if none of this works. – Lonnie Best Oct 19 '20 at 05:42
  • It s not the transparent part of the image that gets white. Please look at my example html page – rubo77 Oct 19 '20 at 07:22

1 Answers1

2

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.

suther
  • 12,600
  • 4
  • 62
  • 99
  • for a test, I tried black background by adding this to my stylesheet: `*{ background:black; } img, img.transparent { background-color:transparent; background-image: linear-gradient();} ` but this didn't help either – rubo77 Oct 18 '20 at 06:25
  • So any other Idea what could be the reason? – rubo77 Oct 25 '20 at 06:35