Safari high memory usage

Details

Target Platform: Web
Target OS version/browser: macOS Big Sur 11.5.2 (20G95) - Safari 14.1.2 (16611.3.10.1.6)
Devices: Mac

Unless I'm looking at the wrong place, it looks like Safari is using a lot of memory for my Flutter app.
In comparison with Chrome, this is not the case.

Left Safari, right Chrome.

If I should be measuring the memory differently, please let me know (I'm not a web developer).
Both are by loading the main page, exact same state.

We are building with
flutter build web --dart-define=SENTRY_RELEASE=$SENTRY_RELEASE -t lib/$FLAVOR_ENTRYPOINT --release --source-maps --web-renderer canvaskit

Logs

   info • The declaration '_createRide' isn't referenced • lib/screens/drivers/detail/drivers_detail_screen.dart:82:8 • unused_element
   info • The declaration '_formatBillingAddress' isn't referenced • lib/screens/drivers/detail/tabs/general/driver_details_general_info_tab.dart:270:10 • unused_element
   info • Don't import implementation files from another package • lib/screens/signin_signup/views/mobile/signin_link_not_verified_sent_mobile_view.dart:3:8 • implementation_imports
   info • Don't import implementation files from another package • lib/screens/signin_signup/views/mobile/signin_link_sent_mobile_view.dart:3:8 • implementation_imports
   info • Don't import implementation files from another package • lib/screens/signin_signup/views/mobile/signin_magic_link_sent_mobile_view.dart:3:8 • implementation_imports
   info • Don't import implementation files from another package • lib/screens/signin_signup/views/mobile/signin_register_existing_user_linked_mobile_view.dart:3:8 • implementation_imports
   info • 'vsync' is deprecated and shouldn't be used. This field is now ignored. This feature was deprecated after v2.2.0-10.1.pre. • lib/screens/signin_signup/views/mobile/signin_signup_mobile_view.dart:56:31 •
          deprecated_member_use
   info • 'vsync' is deprecated and shouldn't be used. This field is now ignored. This feature was deprecated after v2.2.0-10.1.pre. • lib/screens/signin_signup/views/tablet/signin_signup_tablet_view.dart:76:37 •
          deprecated_member_use

8 issues found. (ran in 11.7s)

[✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale en-GB)
    • Flutter version 2.5.3 at /Users/glennruysschaert/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (4 weeks ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/glennruysschaert/Library/Android/sdk
    • Platform android-31, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.1, Build version 13A1030d
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.28.0

[✓] Connected device (3 available)
    • Glenn’s iPad (mobile) • 00008101-000D4D112139003A • ios            • iOS 15.0.2 19A404
    • macOS (desktop)       • macos                     • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)          • chrome                    • web-javascript • Google Chrome 95.0.4638.69

• No issues found!

@vixez

Hi @vixez
This seems to be more of an issue with your browser than flutter. Can you confirm if the behavior persists when running native web pages and see if there is a significant memory difference?

@mamuseferha

@mamuseferha
I tried various websites (Facebook, Twitter, ..) and Safari does seem to be using more memory than Chrome, but not 10x more than Chrome like in the screenshot. Usually it's 1,5x or 2x more than Chrome.

We tried the Flutter site on various Macs, with different OS and Safari/Chrome versions, and the results are consistent there. The website is always using several times more memory than Chrome. So there must be something that Flutter does which makes Safari take up a lot of resources.
We also got a memory warning from Safari twice on the Flutter website, after which the website started working very slow. This behaviour did not occur on Chrome.

When you watch the memory usage in Chrome it seems like the GC is doing its job well, as the memory goes up when navigating to new routes but also goes back down when popping the routes. On Safari the memory just keeps going up, so maybe something is off with the GC? Just a guess.

@vixez

Hi @vixez I tested this issue on the latest stable and master channel using the default counter app, and memory usage on safari seems to be significantly higher than chrome.

output

safari

chrome

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6.1 20G224 darwin-x64, locale en-US)
    • Flutter version 2.5.3 at /Users/flo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (4 weeks ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.11.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.6.1 20G224 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-12.0.pre.701, on macOS 11.6.1 20G224 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.701 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 24b9346c9b (7 hours ago), 2021-11-11 16:45:40 -0800
    • Engine revision aaacb670af
    • Dart version 2.15.0 (build 2.15.0-285.0.dev)
    • DevTools version 2.8.0

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.6.1 20G224 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

Thank you

@LuisReyes98

@LuisReyes98 try the solution I linked above. We've been fighting these kinds of issues for years where the app crashes due to running out of canvaskit heap space. Tends to happen a lot more with images data because it uses a lot of heap space.

A few tips that may help people struggling with heap memory problems on the current stable releases:

never ever use html element view or anything that causes HTML elements to be inserted into the page.
be very careful about image usage. load images a the resolution you need them for, and if you really need to minimize the memory usage, use something like (https://api.flutter.dev/flutter/dart-ui_web/createImageFromTextureSource.html) on web which can eliminate the usage of canvaskit heap memory almost entirely.
if you ever use RawImage and change the ui.image that it points to, it will leak so don't use raw image, use CustomPainter.

@harryterkelsen

@harryterkelsen @yjbanov I don't think I've filed the RawImage issue, but may be what is causing the Wonderous app to crash. Basic problem is RawImage memory handling assumes the underlying image never changes and then leaks handles because of some bad assumptions in some optimizations made a few years ago. I tracked the details down a while back when we were seeing crashes due to using RawImage. Looks like RawImage is used by Image, and looks like wonderous swaps out images with new images, when clicking around, so might be hitting the same codepath we were having issues with RawImage leaks.

A while back I looked into RawImage to see why it was leaking. Looks like it clones your image handle before it passes it to RenderImage:

flutter/packages/flutter/lib/src/widgets/basic.dart

Line 6131 in 1fb0771

image: image?.clone(),

But then RenderImage only disposes the image when it changes if it's a clone of the image that it currently has:

flutter/packages/flutter/lib/src/rendering/image.dart

Line 92 in 1fb0771

if (value != null && _image != null && value.isCloneOf(_image!)) {

Not sure if it's related to wonderous issue, but definitely was causing us trouble...

@jezell

A few major things happened since this issue was filed:

Image.dispose was introduced (Picture.dispose also helps because pictures hold onto images behind-the-scenes too). The standard framework widgets have been updated to take advantage of it. Image data should now be deleted on time, instead of accumulating while the GC is taking its time. The leak tracker is able to track leaked images and report back to the developer.
Non-animated images are now decoded using the <img> tag instead of wasm codecs. We now upload images into WebGL textures directly, bypassing the wasm memory.
Now that we don't need the extra memory to hold image data, we reduced the initial wasm memory size from 128MB down to 32MB ([web] Start with a smaller memory allocation for CanvasKit flutter-team-archive/engine#56900).

@jezell The RawImage issue is concerning. It doesn't look like it would be a Safari-specific issue, but maybe what's happening is that bug jettisons some images back to GC, which means the timing of disposal is subject to browser-specific GC heuristics.

We're also looking into an issue with pictures leaking into GC, which could be related if pictures hold onto image memory behind-the-scenes.

@yjbanov

@yjbanov Interesting, #153678 sounds like something we've been seeing as well but very hard to repro

@jezell

@jezell Have you filed an issue about RawImage/RenderImage? I'd hate it to get lost in the ocean of github comments (lost in the sea of github issues is better 😄 ).

@yjbanov

@yjbanov hadn't logged it before, but here it is with something that repros a crash on dartpad for me: #159902

In Safari, decodeBlobToCkImage(DomBlob blob), CkImageBlobCodec, and HtmlBlobCodec are called in this order. Reading the code, HtmlBlobCodec is expected to release the blob by revokeObjectURL in dispose() method.
However, when I check the flutter/flutter code, it seems that codec.dispose() is not called. I think the following patch will make revokeObjectURL to be called. Is this idea correct?

#159945

For example, in decodeImageFromList it is easy to see that ui.Codec's dispose is not called.

Future<ui.Image> decodeImageFromList(Uint8List bytes) async {
  final ui.ImmutableBuffer buffer = await ui.ImmutableBuffer.fromUint8List(bytes);
  final ui.Codec codec = await PaintingBinding.instance.instantiateImageCodecWithSize(buffer);
  final ui.FrameInfo frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}

https://github.com/flutter/flutter/blob/3.27.0/packages/flutter/lib/src/painting/image_decoder.dart#L25-L30

I created a PR because it looked like we needed to call codec.dispose(). #159945

Updated

The BrowserImageDecoder has an AlarmClock that destroys itself. Therefore, CkBrowserImageDecoder does not need to call dispose from outside.
On the other hand, HtmlImageElementCodec does not have an AlarmClock to dispose of itself. Therefore, HtmlBlobCodec needs to call dispose from outside. Since revokeObjectURL is executed at dispose time, which can lead to memory leaks if not called.

These two processes are switched according to the value of browserSupportsImageDecoder. The implementation must be unified, whether it calls dispose externally or internally.

Update of the use case of the app I work on:

Thanks to the tips given in this thread we manage to figure out what action was causing the crashes in our app.
We use custom made markers with google_maps_flutter , in which we transform a widget into a marker
internally google scales the images for each platform.

so when we created the marker like this:

Marker(
  icon: BitmapDescriptor.bytes(
    uint8List,
  ),

The app will crash randomly when adding , updating or removing too many markers at once

So we changed it to be like this:

Marker(
  icon: BitmapDescriptor.bytes(
    uint8List,
    bitmapScaling: MapBitmapScaling.none,
  ),

Declaring the bitmapScaling to MapBitmapScaling.none stabilized the app and managed to make it run properly on Safari using canvas kit.

fix: Dispose codec after completing frame creation (#159945)

anything update on this issue? we are facing this issue, its been open from 2021

@Rosario9527

I think the repro code and the info provided by @Rosario9527 are excellent

Steps to reproduce

flutter 3.32.5, keep calling setState in statefulwidget, the memory will slowly increase. Both macos safari and iOS safari have the same problem

Expected results

Low memory and stable memory

Actual results

Code sample

Code sample
import 'dart:async';

import 'package:flutter/material.dart';

class SetStateMemory extends StatefulWidget {
const SetStateMemory({super.key});

@OverRide
State createState() => _State();
}

class _State extends State {
int counter = 0;
late Timer timer;

@OverRide
void initState() {
super.initState();
timer = Timer.periodic(Duration(milliseconds: 100), (e) {
setState(() {
counter++;
});
});
}

@OverRide
void dispose() {
timer.cancel();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('$counter'),
),
);
}
}

Screenshots or Video

Screenshots / Video demonstration
[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[!] Flutter (Channel [user-branch], 3.32.5, on macOS 15.5 24F74 darwin-arm64, locale en-CN) [605ms]
! Flutter version 3.32.5 on channel [user-branch] at /opt/homebrew/Caskroom/flutter/3.27.4/flutter
Currently on an unknown channel. Run flutter channel to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
• Framework revision fcf2c11 (10 days ago), 2025-06-24 11:44:07 -0700
• Engine revision dd93de6
• Dart version 3.8.1
• DevTools version 2.45.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 35.0.0) [2.4s]
• Android SDK at /Users/macc/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: flutter config --jdk-dir="path/to/jdk".
• 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.2) [1,100ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2

[✓] Chrome - develop for the web [41ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1) [40ms]
• 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)

[✓] IntelliJ IDEA Community Edition (version 2023.2.7) [39ms]
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• 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.101.2) [16ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.112.0

[✓] Connected device (3 available) [6.7s]
• macOS (desktop) • macos • darwin-arm64 • macOS 15.5 24F74 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 138.0.7204.93

[✓] Network resources [835ms]
• All expected network resources are available.

Do you have any updates on this? 👀

Navigation Menu

Repository navigation

Safari high memory usage #93404

Details

Logs

19 remaining items

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Safari high memory usage #93404

Description

Details

Logs

Activity

mamuseferha commented on Nov 11, 2021

vixez commented on Nov 11, 2021

mamuseferha commented on Nov 12, 2021

19 remaining items

jezell commented on Dec 6, 2024

jezell commented on Dec 6, 2024

yjbanov commented on Dec 6, 2024

jezell commented on Dec 6, 2024

yjbanov commented on Dec 6, 2024

jezell commented on Dec 6, 2024

koji-1009 commented on Dec 8, 2024

koji-1009 commented on Dec 17, 2024

LuisReyes98 commented on Jan 9, 2025

Allamprabhu11 commented on Jul 4, 2025

iapicca commented on Jul 4, 2025

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Garciconx commented on Dec 10, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions