Bug 248755 – Animated AVIF rendering seems glitched/broken

• Status: RESOLVED
• Resolution: MOVED
• Component: Images

[Mathias Bynens]

Animated AVIF rendering seems glitchy; images seem to be rendered inconsistently to the point where navigating to the same image and refreshing randomly results in different rendering.

The WPT test at http://wpt.live/avif/animated-avif-timeout.html is failing in Safari because of this. This test uses an animated AVIF image with a single short red frame followed by a long green frame — just two colors in total. In Safari, even when accessing the image directly, it gets rendered as a short red frame followed by the expected dark green frame, randomly (& inconsistently) changing to a lighter shade of green.

I’ve tested with various animated AVIF images and haven’t found a single one that renders interoperably with Chrome.

I’ll attach some test images that I’ve used, attributing their sources here:

1) 1-red-then-green.avif is the WPT test image taken from http://wpt.live/images/animated-avif.avif. Its rendering is inconsistently glitchy on WebKit. (If not, try reloading the image.)
2) 2-google-noto-animated-emoji-1f604.avif is a random animation taken from https://googlefonts.github.io/noto-emoji-animation/. Its rendering is inconsistently glitchy on WebKit. (If not, try reloading the image.)
3) 3-sequence-without-pitm.avif is an AVIF with an image sequence but no primary item (no `pitm` box), taken from https://bugzilla.mozilla.org/show_bug.cgi?id=1686338#c6. Chrome displays this animation; WebKit just shows a static black rectangle.
4) 4-sequence-with-pitm.avif is an AVIF with an image sequence with a still image primary item (`pitm`), taken from https://bugzilla.mozilla.org/show_bug.cgi?id=1686338#c7. Its rendering is inconsistently glitchy on WebKit. (If not, try reloading the image.)

I haven’t found an animated AVIF image that renders correctly.

I’m using macOS Ventura 13.0.1 (22A400) and I’m testing in the latest Safari Technology Preview Release 159 (Safari 16.4, WebKit 18615.1.12.130.1).

[Mathias Bynens]

Created attachment 463888 [details]
1-red-then-green.avif is the WPT test image taken from http://wpt.live/images/animated-avif.avif. Its rendering is inconsistently glitchy on WebKit. (If not, try reloading the image.)

[Mathias Bynens]

Created attachment 463889 [details]
2-google-noto-animated-emoji-1f604.avif

[Mathias Bynens]

Created attachment 463890 [details]
3-sequence-without-pitm.avif

[Mathias Bynens]

Created attachment 463891 [details]
4-sequence-with-pitm.avif

[Mathias Bynens]

In case it’s relevant, I’m on a 16-inch 2021 MacBook Pro with an Apple M1 Pro chip.

[Radar WebKit Bug Importer]

<rdar://problem/102973964>

[Mathias Bynens]

Even the *.avifs images from https://commits.webkit.org/235548@main (bug 222804) have this problem.

[Mathias Bynens]

Created attachment 463908 [details]
Screen recording showing the problem in the latest Safari TP (left), with Chrome’s rendering as a comparison (right)

[Oliver Williams]

Created attachment 464587 [details]
Screenshot of bug

All the animated AVIF images I have tried have been very buggy in Safari, as demonstrated by this screenshot

[ChangSeok Oh]

I confirmed all attached images work well for the GTK port. I have nothing to help you on my end.

[Sam Sneddon [:gsnedders]]

FWIW: the bug here is in Ventura's implementation of AVIF, and not in WebKit; the relevant team at Apple is tracking this bug.

[Brent Fulgham]

The fix for this issue shipped as part of iOS 16.4.1 and macOS 13.3.1.