Animated PNG is decoded incorrectly

[SludgePhD]

Expected

This is how the animation should look (assuming your browser correctly implements APNG decoding; Firefox and Chromium-based browsers work fine in my tests).

Actual behaviour

Screencast_20240623_180709.webm

Using image to decode the animation and rendering the result to a window produces this flickering output instead. Other images work fine, so I don't think the bug is in my code.

Reproduction steps

The failing APNG is attached above.

[ripytide]

I can reproduce the issue:

use std::io::Cursor;

use image::codecs::png::PngDecoder;
use image::AnimationDecoder;

fn main() {
    let png_decoder = PngDecoder::new(Cursor::new(std::fs::read("monkey.png").unwrap())).unwrap();

    let apng_decoder = png_decoder.apng().unwrap();

    let frames = apng_decoder.into_frames().collect_frames().unwrap();

    for (i, frame) in frames.into_iter().enumerate() {
        frame
            .buffer()
            .save_with_format(format!("frame-{i}.png"), image::ImageFormat::Png)
            .unwrap();
    }
}

It seems frames 2, 12 and 13 have missing sections (possibly via alpha=0) and all other frames seem fine.

[Shnatsel]

At a glance this looks like an issue with compositing. Those frames do not change the the book, so that area is omitted from the frames. Other decoders fill in that area from the composited result of the previous frames, but apparently image does not.

We have correct compositing in the GIF decoder in image already. It even handles memory limits. We should generalize it to APNG and WebP animations too.