Grey screen when loading Google Map in Safari on iOS #120367

MattOutdore · 2023-02-09T15:46:41Z

Steps to Reproduce

Build in release
Deploy to Firebase hosting
Visit website on an iPhone 8 Plus

Expected results: Map should be visible

Actual results: Grey screen where map should be, refresh can SOMETIMES get map to load correctly

Code sample

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainPage(),
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: GoogleMap(
        mapType: MapType.normal,
        buildingsEnabled: false,
        trafficEnabled: false,
        indoorViewEnabled: false,
        myLocationEnabled: false,
        initialCameraPosition: CameraPosition(
          target: LatLng(51.5035669, -0.1074641),
          zoom: 13.0,
        ),
      ),
    );
  }
}

Logs

➜  webapp_clean flutter analyze
Analyzing webapp_clean...                                               
No issues found! (ran in 0.9s)

➜  ~ flutter doctor -v                
[✓] Flutter (Channel stable, 3.7.1, on macOS 13.0 22A380 darwin-arm64, locale en-GB)
    • Flutter version 3.7.1 on channel stable at /Users/matt/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7048ed95a5 (8 days ago), 2023-02-01 09:07:31 -0800
    • Engine revision 800594f1f4
    • Dart version 2.19.1
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/matt/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /opt/homebrew/Cellar/openjdk/19.0.2/libexec/openjdk.jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Homebrew (build 19.0.2)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

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

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/matt/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9514443/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/matt/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

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

[✓] Connected device (3 available)
    • Matthew’s iPhone (mobile) • ae2c00ab6c3c924f42197f3064bf26ac373a0e6f • ios            • iOS
      16.3 20D47
    • macOS (desktop)           • macos                                    • darwin-arm64   • macOS
      13.0 22A380 darwin-arm64
    • Chrome (web)              • chrome                                   • web-javascript • Google
      Chrome 110.0.5481.77

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

The text was updated successfully, but these errors were encountered:

huycozy · 2023-02-10T05:18:12Z

Hi @MattOutdore
I tested this with both localhost and Firebase hosting but it works as expected as below demo:

localhost	firebase hosting

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.3, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.7.3 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9944297138 (17 hours ago), 2023-02-08 15:46:04 -0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Users/huynq/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio (version 2022.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.75.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 110.0.5481.77

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.8.0-8.0.pre.24, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.8.0-8.0.pre.24 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9996126740 (24 minutes ago), 2023-02-09 16:51:26 +0000
    • Engine revision eb346ba63f
    • Dart version 3.0.0 (build 3.0.0-218.0.dev)
    • DevTools version 2.21.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 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.75.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 110.0.5481.77

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

You can try my deployed site at https://reproduceissues.web.app/.

If the issue still persists, please provide the google_maps_flutter version you are using, along with affected device info (OS) so that we can verify the issue. And please also provide the deployed site if any.

MattOutdore · 2023-02-13T10:36:43Z

Sorry, accidentally marked as complete.

I've managed to narrow down the issue. It seems to be when putting another widget alongside the map but doesn't happen on this test site I setup. It only happens in the production project, even with the exact same code. There are no restrictions on either of the API keys. The issue is specific to Safari

iPhone 8 Plus - iOS 15.6.1
Macbook Air 2017 - Monterey 12.6.2
https://testmap-dc38e.web.app/#/

huycozy · 2023-02-14T05:27:57Z

I tried opening your above site on my device iPhone 7, iOS 15.7.2 but it works fine as below demo:

Demo video

RPReplay_Final1676352091.MP4

Can you share a recorded video for this issue? It may be a device-specific issue. Also, which google_maps_flutter version are you using?

May be related/similar: #116969

MattOutdore · 2023-02-14T11:52:42Z

The screen stays grey until the user interacts with it. I tried adding a animateCamera after the map loads with the onMapCreated function but it just jumps to an incorrectly rendered level instead of smoothly zooming in.

Here are the versions that I'm using.

google_maps_flutter: 2.2.3
google_maps_flutter_web: 0.4.0+5

Video

Screen.Recording.2023-02-14.at.11.43.01.mov

huycozy · 2023-02-15T02:59:25Z

@MattOutdore Your recorded video is from the production web and it seems hard to see the issue if you don't focus on it.
Also, you are opening Safari on MacOS but the previous comments are about Safari on iOS. Please report the issue uniformly so we can verify it properly.

In case it's Safari on MacOS, please follow up on #116969 for further updates and feel free close this issue.

Please also try running your sample code and point out the issue so that we may see it. Thanks!

github-actions · 2023-03-08T03:14:06Z

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

github-actions · 2023-03-22T04:00:55Z

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.

huycozy added the in triage Presently being triaged by the triage team label Feb 10, 2023

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 10, 2023

MattOutdore closed this as completed Feb 13, 2023

MattOutdore reopened this Feb 13, 2023

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 13, 2023

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 14, 2023

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 14, 2023

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 15, 2023

github-actions bot closed this as completed Mar 8, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grey screen when loading Google Map in Safari on iOS #120367

Grey screen when loading Google Map in Safari on iOS #120367

MattOutdore commented Feb 9, 2023

huycozy commented Feb 10, 2023

MattOutdore commented Feb 13, 2023

huycozy commented Feb 14, 2023

MattOutdore commented Feb 14, 2023 •

edited by huycozy

huycozy commented Feb 15, 2023

github-actions bot commented Mar 8, 2023

github-actions bot commented Mar 22, 2023

Grey screen when loading Google Map in Safari on iOS #120367

Grey screen when loading Google Map in Safari on iOS #120367

Comments

MattOutdore commented Feb 9, 2023

Steps to Reproduce

huycozy commented Feb 10, 2023

MattOutdore commented Feb 13, 2023

huycozy commented Feb 14, 2023

MattOutdore commented Feb 14, 2023 • edited by huycozy

huycozy commented Feb 15, 2023

github-actions bot commented Mar 8, 2023

github-actions bot commented Mar 22, 2023

MattOutdore commented Feb 14, 2023 •

edited by huycozy