Severe performance regression on Firefox in v. 3.19

[kristoffer-zliide]

Steps to reproduce

Use a website built with Flutter 3.19.0 or later in Firefox.

Code sample

Code sample

$ flutter create --sample=widgets.ListView.7 .
$ flutter build web --no-pub --no-native-null-assertions --pwa-strategy none --no-web-resources-cdn

I've built ListView.7 sample on versions 3.16.9, 3.19.0, and 3.19.4 using the html and canvaskit renderers:

https://zliide.github.io/flutter_web_perf/3.16.9-canvaskit/
https://zliide.github.io/flutter_web_perf/3.16.9-html/
https://zliide.github.io/flutter_web_perf/3.19.0-9.0.pre-canvaskit/
https://zliide.github.io/flutter_web_perf/3.19.0-9.0.pre-html/
https://zliide.github.io/flutter_web_perf/3.19.0-canvaskit/
https://zliide.github.io/flutter_web_perf/3.19.0-html/
https://zliide.github.io/flutter_web_perf/3.19.4-canvaskit/
https://zliide.github.io/flutter_web_perf/3.19.4-html/

Try opening them in Firefox, scroll up and down a bit, and see if you can spot a pattern.

Performance profiling on master channel

• The issue still persists on the master channel

Timeline Traces

Timeline Traces JSON

N/A; flutter run doesn't work with Firefox.

Video demonstration

Video demonstration

[Upload media here]

What target platforms are you seeing this bug on?

Web

OS/Browser name and version | Device information

Firefox v123

Does the problem occur on emulator/simulator as well as on physical devices?

Unknown

Is the problem only reproducible with Impeller?

N/A

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

$ flutter doctor -v
[✓] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.22631.3296], locale ...)
    • Flutter version 3.19.3 on channel stable at C:\Users\...
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (2 weeks ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\...\AppData\Local\Android\sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[✗] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.4.33403.182
    • Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2023.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 17.0.9+0--11185874)

[✓] VS Code (version 1.87.2)
    • VS Code
    • Flutter extension version 3.84.0

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

! Doctor found issues in 2 categories.

[darshankawar]

Thanks for the report @kristoffer-zliide
I followed the steps and ran the code on chrome and firefox respectively but didn't notice / observe any performance issue while scrolling the list, as shown below:

145563.mov

Can you provide a short video which shows the performance difference between chrome and firefox that too with respect to 3.16 vs 3.19 ?

[kristoffer-zliide]

OK, I concede it's not so clear with such a simple app, but despite how basic it is I find it very noticeable, with frame rates subjectively between 1 and 5 fps. The point of the sample builds was mostly to prove that the regression occurred in 3.19.0; 3.16.9 is super smooth in Firefox. If you want a taste of how bad it is in a real app, try opening https://flutter-gallery-archive.web.app/ in Firefox.

Firefox.performance.regression.mp4

[darshankawar]

@kristoffer-zliide
Can you also check on latest master if this still persists or not. There was a recent issue and fix made that you can verify.

[kristoffer-zliide]

Recent? You've known about this for almost four months? 😬

I've updated the description with links to builds based on v3.19.0-9.0.pre, which seems to be the first version that includes the fix from that issue. And it is indeed as smooth as v3.16.9 👍

[darshankawar]

Thanks for the update. I can't seem to notice the difference using the updated links in original description and also after compiling locally using the ListView example as mentioned and also per my earlier verification.
Based on the report, I'll keep the issue open and label for team's input / attention.

[OlehSv]

I can reproduce the bug and see significant drop of performance in firefox since 3.19.0. Problem not related to scroll, drop exists in all animations.

[Aerofluxx]

It's not only performance in firefox since 3.19.0 - also TextFormFields in Dialogs jumping around like crazy as soon as you enter text into them.

Fingers crossed for a fast fix, can't upgrade to 3.19.0 until Safari and Firefox is fixed again.

Edit:
Just installed Flutter 3.21.0-1.0.pre.2 on our STG server, looking very promising for Safari & FF!

[bc-lee]

Another flutter 3.19's firefox issue is #144731, and I believe this also can be fixed by flutter/engine@f4a4f04. See my comment for more details.

[tomekit]

In our case Flutter 3.19 is unusable on Web on Firefox, however I can confirm that on latest master I couldn't spot any notable issues.

Please find these two examples.

3.16: https://web.s3drive.app
3.19: https://st1.web.s3drive.app

UPDATE:
Problem is now resolved by the Flutter team with the release of 3.19.6

[yjbanov]

@bc-lee is correct. This is due to https://bugzilla.mozilla.org/show_bug.cgi?id=1788206, which we had to revert. Unfortunately the cherry pick was denied. We'll probably have to do a hot fix.

[spydon]

We see a major performance degradation for all Flame games in Firefox too, you can see it clearly with this example, or pretty much any example on that page.

[kristoffer-zliide]

@yjbanov: can you point us in the direction of the reasoning behind the cherry-pick being denied?

[yjbanov]

I did not participate in the cherry pick process, so I'm not sure. Unfortunately, I mistakenly thought that the original regression didn't make it into stable yet. At this point a hot fix is the only option as 3.19 is already out.

[kristoffer-zliide]

OK, cool. Let's do a hotfix as soon as possible, then ☺️

[bc-lee]

I would like to note that my CP request to stable was rejected by the Flutter team. They said:

CP not lgtm. The patch is quite large, the fix exists in multiple beta versions, and there is a workaround. We should not be cherry-picking this to stable so late in the cycle.

#145864 (comment)

If you want to change the Flutter team's decision, you can try to convince them by commenting on this issue or that CP request.

[CodeDoctorDE]

I don't see "Use html renderer" as workaround. The html renderer should be deprecated and doesn't support many features of the canvas renderer.
https://flutter.dev/go/deprecate-html-renderer

[yjbanov]

@bc-lee It is true that it was rejected by the Flutter team. The Flutter team is made of individuals though. We depend on communication to make best decisions and sometimes we fail. We became aware of this bug early on, as it was reported by a customer who lives on the bleeding edge, so I mistakenly believed that we fixed it quickly enough before it made into a release. Sorry about that.

[harryterkelsen]

I'm preparing a hotfix now

[kevmoo]

See flutter/engine#52141 !!!

[bc-lee]

I can confirm that with Flutter 3.19.6, the issue is gone. Thanks for the cherry-pick!

[kristoffer-zliide]

I can also confirm that it has been fixed in v. 3.19.6. Thank you very much!

[tomekit]

UPDATE: No longer true. We've been running outdated Canvaskit: #145563 (comment)

In our case performance problem is slightly improved, but site is still quite unusable with visible hover delay and forms requiring multiple clicks in order to get focus.

If you visit these sites on Firefox:
Live runs on: 3.16.9: https://web.s3drive.app/
No problems switching between forms, no visible delay.

Staging runs on latest 3.19.6: https://st1.web.s3drive.app/
Noticeable delay, clicking on form doesn't always switches focus.

When used Chromium both: 3.16.9 and 3.19.6 work just fine.
~~

[iapicca]

In our case performance problem is slightly improved, but site is still quite unusable with visible hover delay and forms requiring multiple clicks in order to get focus.

If you visit these sites on Firefox: Live runs on: 3.16.9: https://web.s3drive.app/ No problems switching between forms, no visible delay.

Staging runs on latest 3.19.6: https://st1.web.s3drive.app/ Noticeable delay, clicking on form doesn't always switches focus.

When used Chromium both: 3.16.9 and 3.19.6 work just fine.

@tomekit
It's definitely the case to open an issue about that
sounds like a regression

[kristoffer-zliide]

@tomekit: it seems you're sending a ~50kb to sentry.s3drive.app on every mouse move event over your form fields. So maybe it's not a performance regression issue you're experiencing but a drowning-in-exceptions issue, albeit only on Firefox in version 3.19 of Flutter. If you build using flutter build web --profile --source-maps you'll get non-minified JavaScript with source maps and maybe you'll be able to use Firefox dev tools to see what's causing the exceptions.

[tomekit]

@kristoffer-zliide Thanks for finding that out, it helped us to realize that issue wasn't on the Flutter side.

In our case the issue was outdated canvaskit that we supply from our endpoints instead of gstatic CDN.
After updating both canvaskit.js and canvaskit.wasm things work smoothly.

Thank you Flutter team.

[EduardoYamauchi]

The issue is gone when you update to 3.16.6.

Thank you, Flutter team, for the fast hotfix and good work prioritizing this.

[github-actions]

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 -v and a minimal reproduction of the issue.