Iphone X Fullscreen Map

I’m submitting a … (check one with “x”)

• question
• any problem or bug report
• feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”)

• Android
• iOS

cordova information: (run $> cordova plugin list)

Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2
com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS
cordova-plugin-googlemaps 2.3.5 "cordova-plugin-googlemaps
@ionic-native/google-maps: ^4.8.2
@ionic-native/core: 4.7.0

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

Current behavior: I’m trying to achieve a full screen map. I was able to do it on my test devices but not on iPhone X as there’s a white space above the map in the notch area. Is this normal, my div is set to width 100% and height 100%.

Screen capture or video record:

Related code

HTML Template

<ion-content>
    <div #map id="map"></div>
  </ion-content>

Thank you very much

[cedrickbae]

Thanks for the ideas, I check safari inspector and the css

.scroll-content {
padding-top : env(safe-area-inset-top);
}

in ionic is causing the white space above. It pushes the map div to the safe area causing white space.

Thanks again!

[wf9a5m75]

If you can’t solve the problem by yourself, please share your project files on GitHub. Otherwise please debug by yourself.