Flutter Web App is Blank on Safari

[suhmeanhuck]

The deployed Flutter Web App works perfectly on Firefox, Microsoft Edge, and Chrome but is blank on Safari. It is blank on Safari regardless of on a Mac, an iPhone, or even emulated iPhone where the actual app works. I tried to delete the font weights using bold (suggested in #35982) and deleting Cupertino icons and fonts (suggested in #39259) to no effect.

The error logged in Safari Console:

[Error] $0 (main.dart.js:34302) aWS (main.dart.js:4369) aXa (main.dart.js:4371) $1 (main.dart.js:33185) aYZ (main.dart.js:2806) (anonymous function) (main.dart.js:2814)

When clicking on $0 (main.dart.js:34302) it says the error is here:

P.ayb.prototype = { $0: function() { var s = H.d(this.a) s.stack = J.b9(this.b) throw s }, <-----------------------------------------------------the console shows that the error is here?------------------- $S: 0 }

[pedromassangocode]

Hi @suhmeanhuck Can you please provide your flutter doctor -v and a minimal complete reproducible code sample? Thank you

[ferhatb]

@suhmeanhuck try running with --profile flag so you can post unminified stack traces, it will help narrow issue down.

[suhmeanhuck]

I think I have narrowed the issue down to Firestore. When I comment out cloud_firestore: ^0.16.0+1 package and take it out of my project, Safari shows the correct home page again instead of the blank screen. I tried to update Cloud Firestore to see if the updated versions may have fixed this issue. I tried fixing all of the multiple dependency conflicts that kept popping up between packages as I upgraded them, but there was a final conflict that I had no way to resolve between the need for a lower and higher version. Now I am going to try downgrading Cloud Firestore to the version before the Invertase team took over the project to see if that resolves the issue, because Safari was previously working for the app. The interesting thing is that Firefox, Chrome, and Edge work flawlessly throughout the entire process - only Safari has this issue.

Flutter Doctor -v report:

[✓] Flutter (Channel beta, 1.22.0, on Mac OS X 10.15.5 19F101, locale en-US) • Flutter version 1.22.0 at /Users/redacted/Downloads/flutter • Framework revision d408d30 (5 months ago), 2020-09-29 11:49:17 -0700 • Engine revision 5babba6c4d • Dart version 2.10.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/redacted/Library/Android/sdk • Platform android-29, build-tools 29.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.5, Build version 11E608c • CocoaPods version 1.10.1

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

[✓] Android Studio (version 3.6) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 49.0.1 • Dart plugin version 192.8052 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] Connected device (3 available) • iPhone 8 (mobile) • D0C7B53E-F48C-41CA-804D-2FB21EF32023 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator) • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.192

• No issues found!

[pedromassangocode]

• Framework revision d408d30 (5 months ago), 2020-09-29 11:49:17 -0700

Your Flutter version seems a bit outdated as well, please make sure to upgrade.

When I comment out cloud_firestore: ^0.16.0+1 package and take it out of my project, Safari shows the correct home page again instead of the blank screen.

If you are 100% that this is a Firestore issue I think you can close this and file a new issue in the appropriate repository. Thank you

[suhmeanhuck]

Downgrading Cloud Firestore actually didn't work. Last time I had tried to upgrade my Flutter and I couldn't make it work that time even after trying to resolve all of the "version solving" issues. This time I kept on restarting and invalidating the caches in Android Studio and even at one time no flutter commands would even work, but after downloading a new flutter package directly from the site it somehow finally allowed me to upgrade. After the upgrade the site did start working on Safari again.

[cs145442]

Two things that could help run flutter web on Safari-based browsers.

• Rendering with HTML may help flutter build web --web-renderer html --release
• (Firebase/FCM) Check for support before requestingPermissions will definitely help FirebaseMessaging.instance.isSupported()

Thanks.

[yakou32]

I have the exact same issue with the latest Flutter stable 2.2.2, but I don't use Firestore at all... Blank screen appears on Mac's Safari, but no problem with Android or Windows. I don't know yet for iOS.

Html renderer did not help, but I suppose that is the default renderer for web desktop anyway. Here are my dependencies:

dependencies: flutter: sdk: flutter auto_route: ^1.0.2 dio: ^4.0.0 flutter_dotenv: ^4.0.0-nullsafety.0 flutter_markdown: ^0.6.1 flutter_riverpod: ^0.13.1+1 flutter_svg: ^0.21.0-nullsafety.0 freezed_annotation: ^0.14.1 get_it: ^7.1.3 getwidget: ^2.0.1-nullsafety.4 intl: ^0.17.0 json_serializable: ^4.1.0 sendgrid_mailer: ^0.1.3 url_launcher: ^6.0.3

Do you know how I could identify the cause of this bug?

[ronaldojr1804]

Mesmo problema dependencias : dio: ^4.0.0 http: ^0.13.1 date_field: ^2.0.1 intl: ^0.17.0

[github-actions[bot]]

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.