Why is this PNG image rendered differently on Chrome and Firefox?

Question

Here is the image url: Image

It gets yellow background on Firefox and green on Chrome and other browers.

Some screenshots:

On chrome:

On firefox:

When I try to save and look at it saved on desktop, it is green background.

Sorry, my english isn't good.

Answer 1

It is an APNG file. The main image (fallback) is green and the animation frame is yellow. Chrome doesn't handle the APNG chunks so it falls back on the main image. Here is a chunk listing; the acTL identifies it as an APNG.

# pngcheck -v *.png
File: BeMshNt.png (795 bytes)
  chunk IHDR at offset 0x0000c, length 13
    400 x 200 image, 8-bit palette, non-interlaced
  chunk acTL at offset 0x00025, length 8
    unknown private, ancillary, unsafe-to-copy chunk
  chunk PLTE at offset 0x00039, length 9: 3 palette entries
  chunk tRNS at offset 0x0004e, length 1: 1 transparency entry
  chunk IDAT at offset 0x0005b, length 295
    zlib: deflated, 32K window, maximum compression
  chunk fcTL at offset 0x0018e, length 26
    unknown private, ancillary, unsafe-to-copy chunk
  chunk fdAT at offset 0x001b4, length 300
    unknown private, ancillary, unsafe-to-copy chunk
  chunk tEXt at offset 0x002ec, length 27, keyword: Software
  chunk IEND at offset 0x00313, length 0
No errors detected in BeMshNt.png (9 chunks, 99.0% compression).

Answer 2

It seems like you created a png file with 3 colors indexed in it : black, green and yellow. I think that Firefox uses the last color indexed to render the file, while chrome uses the second one. Dont ask me why ... I don't know. Hope It helped anyway.