Flutter web throws errors when using Chrome broswer on Android/iOS phones

[xjyribro]

Steps to reproduce

1. Build Flutter with either flutter build web or flutter build web --web-renderer canvaskit
2. Push to Github and deploy github pages.
3. Load app on desktop. Works well.
4. Load app on mobile Chrome browser.
5. Loads first page, but hangs when trying to load a Flame game.

Expected results

Should be able to play game on both Desktop and Mobile.

Actual results

Flutter app hangs when trying to load a Flame game.

Code sample

Code sample

I am loading a GameWidget from the Flame package. I suspect the tilemap or sprite image rendering has a problem on mobile browsers. ```dart class GameWidgetWrapper extends StatelessWidget { final bool loadFromSave; const GameWidgetWrapper({super.key, required this.loadFromSave}); @override Widget build(BuildContext context) { return Center( child: ClipRect( child: SizedBox( width: gameWidth, height: gameHeight, child: GameWidget( game: GomilandGame( gameStateBloc: context.read(), playerStateBloc: context.read(), progressStateBloc: context.read(), dayStateBloc: context.read(), loadFromSave: loadFromSave, ), overlayBuilderMap: { 'Loading': (BuildContext context, GomilandGame game) { return const LoadingOverlay(); }, 'ConfirmExitRoom': (BuildContext context, GomilandGame game) { return ConfirmExitRoom(game: game); }, 'GameMenu': (BuildContext context, GomilandGame game) { return GameMenu(game: game); }, 'ConfirmExitGame': (BuildContext context, GomilandGame game) { return ConfirmExitGame(game: game); }, 'MuteButton': (BuildContext context, GomilandGame game) { return const MuteButton(); }, }, ), ), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration


Logs

Logs

```console Uncaught TypeError: Cannot read properties of null (reading 'readPixels') at Pg.E1 (main.dart.js:34438:5) at E_.IF (main.dart.js:53394:5) at main.dart.js:94147:16 at aGG.a (main.dart.js:4468:62) at aGG.$2 (main.dart.js:41098:14) at Object.o (main.dart.js:4454:10) at RM.afa (main.dart.js:94157:10) at RM.uV (main.dart.js:94138:19) at main.dart.js:94031:14 at aGG.a (main.dart.js:4468:62) ```

Flutter Doctor output

Doctor output

```console [√] Flutter (Channel stable, 3.16.5, on Microsoft Windows [Version 10.0.19045.4046], locale en-GB) • Flutter version 3.16.5 on channel stable at C:\Users\limch\Documents\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 78666c8dc5 (2 months ago), 2023-12-19 16:14:14 -0800 • Engine revision 3f3e560236 • Dart version 3.2.3 • DevTools version 2.28.4 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at C:\Users\limch\AppData\Local\Android\Sdk • Platform android-33, build-tools 33.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.8) • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools • Visual Studio Build Tools 2019 version 16.11.32002.261 • Windows 10 SDK version 10.0.19041.0 [√] Android Studio (version 2021.2) • Android Studio at C:\Program Files\Android\Android Studio • 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 11.0.12+7-b1504.28-7817840) [√] IntelliJ IDEA Ultimate Edition (version 2023.2) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2023.2 • 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 [√] VS Code (version 1.86.2) • VS Code at C:\Users\limch\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.82.0 [√] Connected device (4 available) • M2010J19SG (mobile) • 8bbb5f8a0421 • android-arm64 • Android 12 (API 31) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.4046] • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.70 • Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.52 [√] Network resources • All expected network resources are available. • No issues found! ```

[xjyribro]

Not sure if this is related but I also occasionally get the same error in Android Studio. It is inconsistent and I have not been able to isolate the problem:

RuntimeError: Aborted(). Build with -sASSERTIONS for more info.
canvaskit/chromium/canvaskit.js 93:75                               Ea
canvaskit/chromium/canvaskit.js 168:377                             k
canvaskit/chromium/canvaskit.js 115:52                              <fn>
canvaskit/chromium/canvaskit.js 105:260                             <computed>
canvaskit/chromium/canvaskit.js 33:9                                g
canvaskit/chromium/canvaskit.js 43:340                              readPixels  // <---- seems like it is the same error
lib/_engine/engine/canvaskit/canvaskit_api.dart 1165:7              SkImageExtension.readPixels
lib/_engine/engine/canvaskit/picture.dart 108:38                    toImageSync
packages/flame_tiled_utils/src/image_batch_compiler.dart 39:26      compileMapLayer

[danagbemava-nc]

Hi @xjyribro, you are using an older version of flutter. Kindly upgrade to the latest version of flutter (3.19.2) to see if you still experience this issue. If you do, please provide a complete runnable reproducible code sample so that we can investigate this issue.

Thank you

[xjyribro]

Hi @danagbemava-nc

I have upgraded to Flutter (3.19.2). The error is still there. This is the link to find the deployed Flutter web demo: https://xjyribro.github.io/xjyribro.gomiland.io/. It works with Desktop Chrome but not mobile.

This is the link to the full repo: https://github.com/xjyribro/gomiland. Thanks for the assistance!

[danagbemava-nc]

Hi @xjyribro, the repo provided is huge, could you provide one with only the relevant code required to reproduce the bug so that it can be properly investigated? Can you also try reaching out to the flame team to see if they can offer any assistance?

PS: If you run the app in profile mode, you might get a clearer stacktrace than the one you get in release mode.

Thank you

[xjyribro]

Ok I will work on a minimum repo. In the meantime, I ran the app in profile mode. The issue is coming from a package called flame_tiled_utils.

This is the better stacktrack:

at Object.throw_ [as throw] (errors.dart:297:3)
at _engine.SurfaceCanvas.__.drawAtlas (canvas.dart:451:5)
at sprite_batch.SpriteBatch.new.render (sprite_batch.dart:378:13)
at orthogonal_tile_layer.OrthogonalTileLayer.new.render (tile_layer.dart:145:16)
at renderable_tile_map.RenderableTiledMap.new.render (renderable_tile_map.dart:414:12)
at image_batch_compiler.ImageBatchCompiler.new.compileMapLayer (image_batch_compiler.dart:29:12)

[xjyribro]

@danagbemava-nc

I created the minimal repohere: https://github.com/xjyribro/tiled_test. Instructions in the readme file. Instructions in the readme file.

I also opened an issue with the Flame package also. https://github.com/flame-engine/flame/issues/3067

[danagbemava-nc]

Hi @xjyribro, is this the error you get with the minimal repro?

errors.dart:297 Uncaught (in promise) Error: TypeError: null: type 'Null' is not a subtype of type 'JavaScriptObject'
    at Object.throw_ [as throw] (errors.dart:297:3)
    at Object._failedAsCheck (rti.dart:1385:3)
    at dart_rti.Rti.new._generalAsCheckImplementation (rti.dart:1363:3)
    at _engine.CkPicture.new.toImageSync (picture.dart:100:47)
    at image_batch_compiler.ImageBatchCompiler.new.compileMapLayer (image_batch_compiler.dart:39:26)
    at game.GomilandWorld.new._loadMap (game.dart:53:33)
    at _loadMap.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:127:5)
    at [_loadMap] (game.dart:39:24)
    at game.GomilandWorld.new.onLoad$ (game.dart:80:11)
    at onLoad$.next (<anonymous>)
    at async_patch.dart:45:50
    at _RootZone.runUnary (zone.dart:1661:54)
    at _FutureListener.thenAwait.handleValue (future_impl.dart:162:18)
    at handleValueCallback (future_impl.dart:838:44)
    at _Future._propagateToListeners (future_impl.dart:867:13)
    at [_completeWithValue] (future_impl.dart:643:5)
    at future.dart:524:22
    at _RootZone.runUnary (zone.dart:1661:54)
    at _FutureListener.then.handleValue (future_impl.dart:162:18)
    at handleValueCallback (future_impl.dart:838:44)
    at _Future._propagateToListeners (future_impl.dart:867:13)
    at [_completeWithValue] (future_impl.dart:643:5)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:713:7)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:181:7

[xjyribro]

No this this is my error:

Uncaught (in promise) Error: UnimplementedError
    at Object.throw_ [as throw] (errors.dart:297:3)
    at _engine.SurfaceCanvas.__.drawAtlas (canvas.dart:451:5)
    at sprite_batch.SpriteBatch.new.render (sprite_batch.dart:378:13)
    at orthogonal_tile_layer.OrthogonalTileLayer.new.render (tile_layer.dart:145:16)
    at renderable_tile_map.RenderableTiledMap.new.render (renderable_tile_map.dart:414:12)
    at image_batch_compiler.ImageBatchCompiler.new.compileMapLayer (image_batch_compiler.dart:29:12)

[danagbemava-nc]

@xjyribro, did you run with the --web-renderer canvaskit flag? If not, I think you might be using the html renderer and I don't think this is supported yet with that renderer.

[xjyribro]

@danagbemava-nc Ah ok with the flag --web-renderer canvaskit . I get the same error as you.

errors.dart:297 Uncaught (in promise) Error: TypeError: null: type 'Null' is not a subtype of type 'JavaScriptObject'
    at Object.throw_ [as throw] (errors.dart:297:3)
    at Object._failedAsCheck (rti.dart:1385:3)
    at dart_rti.Rti.new._generalAsCheckImplementation (rti.dart:1363:3)
    at _engine.CkPicture.new.toImageSync (picture.dart:100:47)
    at image_batch_compiler.ImageBatchCompiler.new.compileMapLayer (image_batch_compiler.dart:39:26)

[danagbemava-nc]

Thanks for the update.

Reproducible using the reduced sample in https://github.com/xjyribro/tiled_test

On Android, the crash occurs at this line https://github.com/flutter/engine/blob/6e4562338cf38cad7ee1de0dbd1040b5a60a876e/lib/web_ui/lib/src/engine/canvaskit/picture.dart#L108

For iOS, the page reloaded several times and crashed when I tried to load the tile map and there wasn't any errors to be collected.

Labeling for further investigation.

errors.dart:296 Uncaught (in promise) Error: TypeError: null: type 'Null' is not a subtype of type 'JavaScriptObject'
    at Object.throw_ [as throw] (errors.dart:296:3)
    at Object._failedAsCheck (rti.dart:1388:3)
    at dart_rti.Rti.new._generalAsCheckImplementation (rti.dart:1366:3)
    at _engine.CkPicture.new.toImageSync (picture.dart:100:47)
    at image_batch_compiler.ImageBatchCompiler.new.compileMapLayer (image_batch_compiler.dart:39:26)
    at game.GomilandWorld.new._loadMap (game.dart:53:33)
    at _loadMap.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:127:5)
    at [_loadMap] (game.dart:39:24)
    at game.GomilandWorld.new.onLoad$ (game.dart:80:11)
    at onLoad$.next (<anonymous>)
    at async_patch.dart:45:50
    at _RootZone.runUnary (zone.dart:1661:54)
    at _FutureListener.thenAwait.handleValue (future_impl.dart:163:18)
    at handleValueCallback (future_impl.dart:847:44)
    at _Future._propagateToListeners (future_impl.dart:876:13)
    at [_completeWithValue] (future_impl.dart:652:5)
    at future.dart:532:22
    at _RootZone.runUnary (zone.dart:1661:54)
    at _FutureListener.then.handleValue (future_impl.dart:163:18)
    at handleValueCallback (future_impl.dart:847:44)
    at _Future._propagateToListeners (future_impl.dart:876:13)
    at [_completeWithValue] (future_impl.dart:652:5)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:722:7)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:181:7

flutter doctor -v

``` [✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB) • Flutter version 3.19.3 on channel stable at /Users/nexus/dev/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ba39319843 (10 hours ago), 2024-03-07 15:22:21 -0600 • Engine revision 2e4ba9c6fb • Dart version 3.3.1 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer • Build 15C500b • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.87.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (5 available) • Pixel 7 (mobile) • 28291FDH2001SA • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.3.1 21D61 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.3.1 21D61 • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.112 ! Error: (null) needs to connect to determine its availability. Check the connection between the device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to be restarted and unlocked. (code 1) [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [!] Flutter (Channel master, 3.21.0-2.0.pre.42, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB) • Flutter version 3.21.0-2.0.pre.42 on channel master at /Users/nexus/dev/sdks/flutters ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7018685222 (5 hours ago), 2024-03-07 20:48:36 -0500 • Engine revision bbb1ed00af • Dart version 3.4.0 (build 3.4.0-212.0.dev) • DevTools version 2.33.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer • Build 15C500b • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.87.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (6 available) • Pixel 7 (mobile) • 28291FDH2001SA • android-arm64 • Android 14 (API 34) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.3.1 21D61 • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios • iOS 17.3.1 21D61 • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.112 ! Error: (null) needs to connect to determine its availability. Check the connection between the device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to be restarted and unlocked. (code 1) [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

[yjbanov]

It looks like ckSurface.surface.makeImageSnapshot() unexpectedly returns null. We're calling CanvasKit.makeImageSnapshot through JS interop, but JS interop cannot guarantee soundness and can still return null even if we expect a non-null value. This needs to be investigated further.

[BonDizard]

any updates on the issue?

[saadzarif]

Any updates? Did someone find the solution or not? @BonDizard what did you do? did you find anything?

[ChunhThanhDe]

When using Flame Flutter, I also got the above error.

However, this error only appears when using web Chrome directly on mobile devices. I have absolutely no errors when using Web Chrome on my computer, including Web Chrome desktop developer tools with a phone screen.

main.dart.js:12731 Error adding components: Unsupported operation: toImageSync is not supported on the HTML backend. Use drawPicture instead, or toImage.
  at Object.d (main.dart.js:4317:18)
  at qq.qW (main.dart.js:16651:17)
  at jw.ld (main.dart.js:30415:12)
  at jm.N7 ( main.dart.js:38091:5)
  at Ez.$1 (main.dart.js:38006:3)
  at e0.G (main.dart.js:26510:30)
  at hJ.fD (main.dart.js:37915:15)
  at GH.$1 (main.dart.js:29872:24)
  at qh.lk (main.dart.js:30016:3)
  at rY.fD (main.dart.js:29850:3)

I have not found a solution yet, still in the process of being investigated. I comment here to get notified if the community has an answer.

Flutter Environment

``` [✓] Flutter (Channel stable, 3.24.3, on macOS 15.1 24B83 darwin-arm64, locale en-VN) • Flutter version 3.24.3 on channel stable at /Users/chunhthanhde/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2663184aa7 (8 weeks ago), 2024-09-11 16:27:48 -0500 • Engine revision 36335019a8 • Dart version 3.5.3 • DevTools version 2.37.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/chunhthanhde/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 16.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 16A242d • CocoaPods version 1.16.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2024.1) • 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 17.0.11+0-17.0.11b1207.24-11852314) [✓] VS Code (version 1.95.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.100.0 [✓] Connected device (3 available) • macOS (desktop) • macos • darwin-arm64 • macOS 15.1 24B83 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.1 24B83 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 130.0.6723.92 [✓] Network resources • All expected network resources are available. • No issues found! ```