Ionic-framework: bug: ionic 5 Modal with Google Maps

[EinfachHans]

Bug Report

Ionic version:


[x] 5.x

Current behavior:

When a Modal on ios over a Page with Google Maps is presented, the Map is black (because background-color: black is set on body). Thats why displaying the Map isn't working while the Modal is present.

Expected behavior:

The Map should be visible and the Background around the Map should be black (#20469).
A possible Solution is to remove the background-color on body and set instead box-shadow: black 0px 0px 0px 100vh; to the resized <ion-router-outlet>. But for me it appears to be a little bit buggy then, so maybe to you know a better solution?

Steps to reproduce:

• Create a App with Google Maps
• Open a Modal over the Google Maps Page (iOS)

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 53 other plugins)

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   Android SDK Tools : 25.2.3 (/Users/hanskrywalsky/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3 (/usr/local/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The default spec for iOS is to display a black background. Additionally, we do not manage the Google Maps plugin, so we are unable to control what styles it injects.

From what it looks like, the Google Maps plugin is injecting global styles in many places which are interfering with the application. Based on the documentation, you should be able to customize what the background is being set to: https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/environment/setBackgroundColor/README.md

[EinfachHans]

@liamdebeasi Setting the Background Color works, but the background-color: black !important that sets to body while the modal is open still overrides that the map is visible. Is it possible to turn it back to use without !important to support a override?

[liamdebeasi]

From the previous issue you opened, you confirmed that this behavior was expected which is why we changed it: https://github.com/ionic-team/ionic/issues/20469#issuecomment-585805752

What is the actual expected behavior in your use case?

[EinfachHans]

Yeah, that my fault, i'm sorry. I didn't know that the Google Maps Class has the Option to set the Background Color itself. In my last issue the space above the Modal was white, but this changes to black too if i use the Environment.setBackgroundColor('#000') method.

So the Behavior i expect when using the Google Maps Plugin and open a Modal above it is that the Border around the Modal is black, but the Map itself should be visible.

[liamdebeasi]

Ok try this dev build and let me know if it fixes the issue: 5.1.0-dev.202002211445.714ecaa. I just removed the !important so you should be able to override it.

[EinfachHans]

Yes it works! The Google Maps Class override it and the Map is visible. In combination with Environment.setBackgroundColor('#000') the Space around the Modal is black! 🎉

Again: I'm really sorry that i didn't test this Part enough in the last Issue!

[liamdebeasi]

No worries, glad it's working now 😄

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.