Repository navigation
GIFs not rendering on Web #161376
Description
Steps to reproduce
setup pubspec.yaml with the asset path
try to display a gif on WEB
Notice that:
iOS, android are working fine, on web it was working too before updating to 3.27.1
Image.asset(
'assets/quickalert/confirm.gif',
fit: BoxFit.contain,
),Expected results
As it was before updating and on iOS/android the image was showing with no problem
Actual results
Error:
Error logs
======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Assertion failed: org-dartlang-sdk:///lib/_engine/engine/image_format_detector.dart:407:12
bytes.getUint8(_position) == 0x2c
is not true
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:3 throw_
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39 assertFailed
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39 [_skipGraphicBlock]
lib/_engine/engine/image_format_detector.dart 334:7 isAnimated
lib/_engine/engine/image_format_detector.dart 47:32 detectImageType
lib/_engine/engine/canvaskit/image.dart 620:32 tryDetectImageType
lib/_engine/engine/canvaskit/image.dart 14:31 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3 _asyncStartSync
lib/_engine/engine/canvaskit/image.dart 9:18 skiaInstantiateImageCodec
lib/_engine/engine/canvaskit/renderer.dart 219:7 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3 _asyncStartSync
lib/_engine/engine/canvaskit/renderer.dart 215:20 instantiateImageCodec
lib/ui/painting.dart 687:28 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 532:3 _asyncStartSync
lib/ui/painting.dart 682:15 instantiateImageCodecWithSize
packages/flutter/src/painting/binding.dart 147:15 instantiateImageCodecWithSize
packages/flutter/src/painting/image_provider.dart 765:18 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 610:19 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 634:23 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 581:31 <fn>
dart-sdk/lib/async/zone.dart 1422:47 _rootRunUnary
dart-sdk/lib/async/zone.dart 1324:19 runUnary
dart-sdk/lib/async/future_impl.dart 204:18 handleValue
dart-sdk/lib/async/future_impl.dart 902:44 handleValueCallback
dart-sdk/lib/async/future_impl.dart 931:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 707:5 [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 777:7 <fn>
dart-sdk/lib/async/zone.dart 1414:13 _rootRun
dart-sdk/lib/async/zone.dart 1317:19 run
dart-sdk/lib/async/zone.dart 1225:7 runGuarded
dart-sdk/lib/async/zone.dart 1265:23 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 186:7 <fn>
Image provider: AssetImage(bundle: null, name: "assets/quickalert/confirm.gif")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#2699e(), name: "assets/quickalert/confirm.gif", scale: 1)
====================================================================================================Code sample
Code sample
//not working -> gif
Image.asset(
'assets/quickalert/confirm.gif',
fit: BoxFit.contain,
),
//working -> png
Image.asset(
'assets/quickalert/confirm.png',
fit: BoxFit.contain,
),Screenshots or Video
No response
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-arm64, locale it-IT)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.96.2)
[✓] Connected device (3 available)
! Error: Browsing on the local area network for Berla. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• No issues found!
sasoftware@Mac-mini-di-SA SA_PalladioApp % flutter doctor -v
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-arm64, locale it-IT)
• Flutter version 3.27.1 on channel stable at /Users/sasoftware/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 17025dd882 (3 settimane fa), 2024-12-17 03:23:09 +0900
• Engine revision cb4b5fff73
• Dart version 3.6.0
• DevTools version 2.40.2
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/sasoftware/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /Users/sasoftware/Library/Java/JavaVirtualMachines/jbr-17.0.12/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment JBR-17.0.12+1-1207.37-nomod (build 17.0.12+1-b1207.37)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16B40
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
[✓] VS Code (version 1.96.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.206
! Error: Browsing on the local area network for Berla. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• All expected network resources are available.
• No issues found!
Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listPackaging, accessing, or using assetsUI glitches reported at the engine/skia or impeller rendering levelflutter/engine related. See also e: labels.Found to occur in 3.27Found to occur in 3.28The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team
Activity
TheCodeDaniel commentedon Jan 9, 2025
@matteoberla
Did you try with another gif ?
Maybe try with another GIF and see the suggestion
matteoberla commentedon Jan 9, 2025
Tried with 5 different files, the problem is displayed only on web. Before updating the error was not displayed, if I try to build the release version the file is correctly displayed
Reprevise commentedon Jan 9, 2025
Can you send some of the GIFs you're testing with @matteoberla?
maheshj01 commentedon Jan 10, 2025
Hi @matteoberla, I tried to reproduce the issue but I was unable to reproduce it, Would you midn sharing some gif assets you are having with? Also is this issue only on web
Is this an issue in release or debug or both?
Screen.Recording.2025-01-09.at.22.39.41.mov
Sample gif Used
flutter doctor -v
matteoberla commentedon Jan 10, 2025
Yes I'll share in few hours
matteoberla commentedon Jan 10, 2025
@maheshj01 I'll try with your file, the error is shown on web just in debug, if i build the release version it works fine
matteoberla commentedon Jan 10, 2025
@maheshj01 your gif works fine.
@Reprevise I'm attaching my files so you can test them and tell me if they works fine.
I can't understand why they aren't working.
For both, the original file source is: https://github.com/belovance/QuickAlert/tree/master/assets
I've tried to remove my local file and download them again from the gh repo but same error.
maheshj01 commentedon Jan 10, 2025
Thanks for the assets @matteoberla, I am able to reproduce the issue on latest stable and the master channel with and without impeller verified on both safari and chrome
Surprisingly it also reproduces with impeller disabled
flutter run -d chrome --no-enable-impellerAndroidIOSMacOsWeb✅ : No Issue ❌: Issue reproduced
Note this issue reproduces only with these assets.zip
logs
flutter doctor -v
11 remaining items
matteoberla commentedon Jan 11, 2025
@maheshj01 Happy to hear that.
Will it be fixed in a future release?
Is there any workaround for the moment?
[canvaskit] Fix GIF decode failure (#161536)
maheshj01 commentedon Jan 14, 2025
@matteoberla the issue is fixed and should be available in upcoming flutter release
[canvaskit] Fix GIF decode failure (flutter#161536)
matteoberla commentedon Jan 17, 2025
Just updated to 3.27.2 but still happening
kevmoo commentedon Jan 17, 2025
@matteoberla – yep. The fix was merged to master, but this has not been cherry-picked.
kevmoo commentedon Jan 17, 2025
I've requested that the fix be merged into the current beta branch: #161536
maheshj01 commentedon Jan 17, 2025
Can confirm its working on the latest master
Screen.Recording.2025-01-17.at.17.58.16.mov
flutter doctor -v
github-actions commentedon Jan 31, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.