javascripthtmlgoogle-chromeanimationapng

APNG num_plays works in Firefox but not in Chrome


An APNG file specification for reference: https://wiki.mozilla.org/APNG_Specification

num_plays defines the number of times than an animated PNG should loop. 0 is a special value that means the animation will loop indefinitely.

I found some APNGs online that I want to display on a webpage. They all have num_plays set to 0. (In this particular example, an animated image of Ivysaur from a Pokémon game: https://cdn.bulbagarden.net/upload/c/c8/Spr_3e_002.png)

I had no problem displaying this original APNG in Chrome, where the animation looped endlessly.

But it's important to me that the animation play only once, and after that show the final frame. I tried some HTML- and JS-based solutions to this, such as waiting a couple of seconds and replacing the APNG img element with a canvas that I drew it to, but I wasn't able to get the results I wanted. The image would reset to the first frame at the end of the animation instead of the last frame, or sometimes the pixel offset of the image content inexplicably differed.

That's when I found out I could change the num_plays value in the acTL section of an APNG to change the number of times it looped to 1 - and so I did.

It works perfectly in Firefox! Here's an example that shows exactly the behavior that I want:

APNG animation plays once in Firefox, then displays the final frame

But in Chrome, the APNG no longer animates at all after changing num_plays.

APNG animation no longer plays at all in Chrome after changing num_plays

What might be causing it to not animate in Chrome? Is a nonzero num_plays simply not supported? What alternatives would I have to get the same behavior as seen in Firefox?


Solution

  • The problem was that I modified an APNG I downloaded from the internet which originally had a num_plays of 0 using a hex editor. I neglected to update the acTL section's CRC when I did so; Firefox played the malformed APNG as I expected it to, but Chrome aborted because my APNG, in not having a correct CRC, failed to meet the spec.