Ionic iPhone X safe areas not working properly
margin-top: 20px; /* Status bar height on iOS 10 */
margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */
margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */
And reduce by 20px top/bottom move respectively.
Dimitri
Focusing on Ionic and cross-platform mobile app development, Deep Learning and Neural Networks. I'm also obsessed with UX and great product design.
Updated on June 17, 2022Comments
-
Dimitri almost 2 years
I'm trying to fit a between the top toolbar and the bottom tabs area. And I need it to work across iPhones 5-X and iOS 10-11. If you ignore iOS10, then no problem exists, but I also need the older versions to work. Here's my CSS. "margin-top" gives the error with iOS 10. If I use "padding-top" then it doesn't work on iPhone X. This is the LoadingController cover, so I don't want to sort it out programmatically from JS to HTML (and don't know how to access the HTML for loading controller to be honest). I have solved this programmatically for Google Maps, but was wondering if there is a solution via CSS? I've got all the latest versions of everything and WKWebView. My ionic view is below.
.loading-ios { margin-top: constant(safe-area-inset-top); margin-top: env(safe-area-inset-top); margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); background-color: white; opacity: 1 !important; position: absolute; top: 64px; bottom: 49px; }
cli packages:
@ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 1.3.12 Cordova Platforms : ios 4.5.4 Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2 ios-sim : 5.0.12 Node : v8.9.3 npm : 5.5.1 OS : macOS High Sierra Xcode : Xcode 9.2 Build version 9C40b