I'm building a Progressive Web App using Ionic 2. In the browser, on both Android and iOS devices, the layout is as it should be.
On Chrome for Android and on Safari, you can add a shortcut to the web app using a "Add to Homescreen" button. When opened, the app will be visible without an address bar to give the user an app-like experience.
On Android, this functionality works without any issues. On iOS however, this functionality causes weird issues with the layout of the app.
For example: I'm using <ion-slides> with bullets as pager icons. On Android, the bullets are almost at the bottom of the page, where they should be. On iOS, after adding it to the homescreen, the bullets are almost to the center of the screen and the rest above the bullets has moved slightly upward.
Swiping is another thing that behaves odd on iOS. When added to the homescreen from Safari, only the part of the page that's shifted can be swiped. Every swipe below the shifted part can not be swiped.
I've been running into these issues from iOS 9 up to 10.3.1
Can anyone give me some advice on how to prevent the layout from acting out so much?
Well just my luck. After searching for different solutions and not finding any, I've decided to post my problem on Stack Overflow. As luck would have it, I found the solution myself within one hour!
Thank you Stack Overflow for providing me with magic powers!
For anyone searching for a solution to a similar problem, try the following:
Make sure you use the following code in app.components.ts:
this.platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
With statusBar and splashScreen coming from @ionic-native/status-bar and @ionic-native/splash-screen respectively. Also make sure that you load them both as a provider in app.module.ts. In package.json you might want to include them as
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2"
and run npm install afterwards.