search

ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Background color of app will be overwritten to white #179

Closed Mike1707 closed 5 years ago

Mike1707 commented 5 years ago

I'm submitting a ... (check one with "x")

If you choose 'problem or bug report', please select OS: (check one with "x")

Maybe also on Android

cordova information: (run $> cordova plugin list) 

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.5.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 3.1.2 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/google-maps": "^5.0.0-beta.27",
"@ionic-native/core": "^5.1.0",

Current behavior: After initializing the plugin, the <ion-content> background color and the <ion-app> background color is set to white. In the provided video you can see the following:

In Tab 2 is a <ion-refresher> and while pulling the refresher, the <ion-app> background is displayed normally (seconds 1-3). In Tab 3 are three Segments which are also colored the right way (seconds 3-6). After Opening Segment 2 (second 7), the Google Maps plugin is initialized and the background colors disappear in the segments (second 10). There is also a display issue when the segments are changed quickly with the map (seconds 11-13). Also the background from the <ion-refresher> which is defined in the global.scss for the <ion-app> is missing (seconds 16-end).

Without a segment-layout the <ion-app> background will be set to white as well.

Expected behavior: The color should be as defined in the global.scss or in the component's .scss file. There should be no displaying issue after changing the segments.

Screen capture or video record:

Link to the Video

Related code, data or error log (please format your code or data):

https://github.com/Mike1707/ionic-native-gmaps-issue

Ionic info output:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/Users/mike/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/mike/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.15.1 (/Users/mike/.nvm/versions/node/v10.15.1/bin/node)
   npm               : 6.8.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61
wf9a5m75 commented 5 years ago

Please understand how to work this plug-in before using. https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md#how-does-this-plugin-work-android-ios

Mike1707 commented 5 years ago

Hey @wf9a5m75 thanks for your answer. That means it's not possible to specify the <ion-app> background color globally in a large application with many pages when using this plugin in one of the pages? If the<ion-app> color changes to transparent just for this one page with the map inside, everything would be fine for me.

If this isn't possible, I might try to put a fixed <div> in all of my pages under the <ion-content>. Something like: 

<div style="position: fixed; width: 100vw; height: 100vh; background: var(--bg-color); z-index: -1;"></div>

However, in my opinion that's not a nice solution.

wf9a5m75 commented 5 years ago

I recommend you see documents before asking. https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/environment/setBackgroundColor/README.md

Mike1707 commented 5 years ago

@wf9a5m75 sorry for that. In the past, I read the documentation but it seems I read over this part.