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

Issue

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.

Solution

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).

Answered By - Glenn Randers-Pehrson

Answer Checked By - Marilyn (PHPFixing Volunteer)