bug: ionic 5 Modal with Google Maps

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 (cordova-lib@9.0.1)
   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]

No worries, glad it’s working now 😄

[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.