Repository navigation
AVIF Image doesn't work on Chrome browsers #160600
Description
Steps to reproduce
Try to render any AVIF in Chrome failed but works fine on Safari and Firefox
Image.network('https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif')Expected results
Image rendered
Actual results
══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to decode image using the browser's ImageDecoder API.
Image source: encoded image bytes
Original browser error: InvalidStateError: Failed to retrieve track metadata.
When the exception was thrown, this was the stack
Image provider:
NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
scale: 1.0)
Image key:
NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
scale: 1.0)
Code sample
import dart:math' as math;
import 'package:flutter/material.dart';
const int maxSeeds = 250;
void main() {
runApp(const Sunflower());
}
class Sunflower extends StatefulWidget {
const Sunflower({super.key});
@override
State<StatefulWidget> createState() {
return _SunflowerState();
}
}
class _SunflowerState extends State<Sunflower> {
int seeds = maxSeeds ~/ 2;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness: Brightness.dark,
appBarTheme: const AppBarTheme(elevation: 2),
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Sunflower'),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network('https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif')
],
),
),
),
);
}
}
class SunflowerWidget extends StatelessWidget {
static const tau = math.pi * 2;
static const scaleFactor = 1 / 40;
static const size = 600.0;
static final phi = (math.sqrt(5) + 1) / 2;
static final rng = math.Random();
final int seeds;
const SunflowerWidget(this.seeds, {super.key});
@override
Widget build(BuildContext context) {
final seedWidgets = <Widget>[];
for (var i = 0; i < seeds; i++) {
final theta = i * tau / phi;
final r = math.sqrt(i) * scaleFactor;
seedWidgets.add(AnimatedAlign(
key: ValueKey(i),
duration: Duration(milliseconds: rng.nextInt(500) + 250),
curve: Curves.easeInOut,
alignment: Alignment(r * math.cos(theta), -1 * r * math.sin(theta)),
child: const Dot(true),
));
}
for (var j = seeds; j < maxSeeds; j++) {
final x = math.cos(tau * j / (maxSeeds - 1)) * 0.9;
final y = math.sin(tau * j / (maxSeeds - 1)) * 0.9;
seedWidgets.add(AnimatedAlign(
key: ValueKey(j),
duration: Duration(milliseconds: rng.nextInt(500) + 250),
curve: Curves.easeInOut,
alignment: Alignment(x, y),
child: const Dot(false),
));
}
return FittedBox(
fit: BoxFit.contain,
child: SizedBox(
height: size,
width: size,
child: Stack(children: seedWidgets),
),
);
}
}
class Dot extends StatelessWidget {
static const size = 5.0;
static const radius = 3.0;
final bool lit;
const Dot(this.lit, {super.key});
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
color: lit ? Colors.orange : Colors.grey.shade700,
borderRadius: BorderRadius.circular(radius),
),
child: const SizedBox(
height: size,
width: size,
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Chrome:
Safari:
Logs
Logs
══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to decode image using the browser's ImageDecoder API.
Image source: encoded image bytes
Original browser error: InvalidStateError: Failed to retrieve track metadata.
When the exception was thrown, this was the stack
Image provider:
NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
scale: 1.0)
Image key:
NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 15.1.1 24B91 darwin-arm64, locale en-PL)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 16.1)
! iOS 18.1 Simulator not installed; this may be necessary for iOS and macOS development.
To download and install the platform, open Xcode, select Xcode > Settings > Platforms,
and click the GET button for the required platform.
For more information, please visit:
https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.96.0)
[✓] Connected device (3 available)
[✓] Network resources
! Doctor found issues in 1 category.
Activity
[-]AVIF doest work on Chrome [/-][+]AVIF doesn't work on Chrome [/+]maheshj01 commentedon Dec 20, 2024
Hi @algu1984, Thanks for filing the issue. I am able to reproduce the issue the image doesn't render on chrome with both wasm and canvaskit renderers while it renders on safarri browser.
logs
flutter doctor -v
[-]AVIF doesn't work on Chrome [/-][+]AVIF Image doesn't work on Chrome browsers[/+]ditman commentedon Jan 8, 2025
@algu1984 quick question, does this happen with other AVIF images?
It seems we're not correctly identifying the supplied image as an avif, probably around here:
flutter/engine/src/flutter/lib/web_ui/lib/src/engine/image_format_detector.dart
Lines 7 to 13 in d9342ae
Here's the hexdump of the first few bytes of the
kimono.avifimage:(It'd be helpful if Flutter's error message specified what was the identified MIME-type when decoding)
maheshj01 commentedon Jan 8, 2025
Looks like none of the avif images are rendered I tried few image samples from here
Safari Vs Chrome
code sample
flutter doctor -v
ditman commentedon Jan 9, 2025
@maheshj01 thanks for confirming!
algu1984 commentedon Jan 9, 2025
@maheshj01 Thanks, @ditman none for sure we discovered bug on our own images for sample I just used repo with samples
troyanskiy commentedon Apr 3, 2025
Confirm the issue with any AVIF.
Just wanted to migrate my file service towards generation AVIFs instead of JPEGs preview, and got problem with Chrome only.
Used simple converter with nodejs sharp lib.
iOS app - OK
Web Safari - OK
Web Firefox - OK
Web Chrome - KO
If download the image and open in chrome just an image -> OK
[web] Fix decoding of still AVIF images on Chrome (flutter#195958)