Bug 248755 - Animated AVIF rendering seems glitched/broken
Summary: Animated AVIF rendering seems glitched/broken
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-12-05 01:59 PST by Mathias Bynens
Modified: 2023-04-11 16:52 PDT (History)
9 users (show)

See Also:


Attachments
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.) (41.41 KB, image/avif)
2022-12-05 02:00 PST, Mathias Bynens
no flags Details
2-google-noto-animated-emoji-1f604.avif (53.90 KB, image/avif)
2022-12-05 02:00 PST, Mathias Bynens
no flags Details
3-sequence-without-pitm.avif (160.65 KB, image/avif)
2022-12-05 02:01 PST, Mathias Bynens
no flags Details
4-sequence-with-pitm.avif (10.50 KB, image/avif)
2022-12-05 02:01 PST, Mathias Bynens
no flags Details
Screen recording showing the problem in the latest Safari TP (left), with Chrome’s rendering as a comparison (right) (67.25 MB, video/quicktime)
2022-12-06 02:03 PST, Mathias Bynens
no flags Details
Screenshot of bug (288.38 KB, image/png)
2023-01-21 07:41 PST, Oliver Williams
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Mathias Bynens 2022-12-05 01:59:37 PST
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).
Comment 1 Mathias Bynens 2022-12-05 02:00:14 PST
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.)
Comment 2 Mathias Bynens 2022-12-05 02:00:48 PST
Created attachment 463889 [details]
2-google-noto-animated-emoji-1f604.avif
Comment 3 Mathias Bynens 2022-12-05 02:01:00 PST
Created attachment 463890 [details]
3-sequence-without-pitm.avif
Comment 4 Mathias Bynens 2022-12-05 02:01:13 PST
Created attachment 463891 [details]
4-sequence-with-pitm.avif
Comment 5 Mathias Bynens 2022-12-05 02:02:58 PST
In case it’s relevant, I’m on a 16-inch 2021 MacBook Pro with an Apple M1 Pro chip.
Comment 6 Radar WebKit Bug Importer 2022-12-05 02:04:52 PST
<rdar://problem/102973964>
Comment 7 Mathias Bynens 2022-12-05 10:07:21 PST
Even the *.avifs images from https://commits.webkit.org/235548@main (bug 222804) have this problem.
Comment 8 Mathias Bynens 2022-12-06 02:03:54 PST
Created attachment 463908 [details]
Screen recording showing the problem in the latest Safari TP (left), with Chrome’s rendering as a comparison (right)
Comment 9 Oliver Williams 2023-01-21 07:41:25 PST
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
Comment 10 ChangSeok Oh 2023-01-22 15:13:44 PST
I confirmed all attached images work well for the GTK port. I have nothing to help you on my end.
Comment 11 Sam Sneddon [:gsnedders] 2023-01-31 13:22:20 PST
FWIW: the bug here is in Ventura's implementation of AVIF, and not in WebKit; the relevant team at Apple is tracking this bug.
Comment 12 Brent Fulgham 2023-04-11 16:52:31 PDT
The fix for this issue shipped as part of iOS 16.4.1 and macOS 13.3.1.