I have my app and it’s working fine on iOS 10 but as iOS 11 is out now so i am testing on iOS 11. I am getting a strange issue. For the first view when we don’t touch anything on screen, design is fine but after we change something or update something i am getting white screen between header and content. And i am getting this issue only in iOS 11. Check the below screenshot:
Did you follow all steps of https://blog.ionic.io/ios-11-checklist/?
@reedrichards yes i have followed all the steps
Please guide me on how can i solve this
Sorry I wish I could but except knowing that all steps for iOS11 should be followed I don’t know more than you 
viewport-fit=cover this is giving this issue. I just removed it and it’s working fine but status bar is white now
I’m having this same issue.
If we add viewport-fit=cover the status bar looks right, but then we get this white space gap above any scroll lists.
It only shows up when coming back to a page - i.e. on our home page it doesnt show at first. Then navigate to one of the app pages, tap back, now there’s a white space below the header above the content.
We have a couple of pages where there is a fixed content header portion with a scroll list underneath. This white space padding gets added to the top of the list as well.
I tried switching to WKWebView, but that is causing all our our REST API calls to break among other issues.
Without viewport-fit=cover: (note the status bar white on white)
With viewport-fit=cover on home page load, before navigating to any content:
After navigating, the white space shows up below the header:
I’ve updated to the latest status bar plugin too, doesn’t seem to make a difference.
Another weird issue is that the Safari web inspector doesn’t seem to work either, so I can’t even see if its some sort of CSS causing this.
The web inspector shows the body element to be empty, and the reload doesn’t seem to reload the content properly, so I’m stuck and don’t know how to dig for more info… 
This is really weird because when i am trying to inspect… I am not getting any padding or margin instead blocks are on the right place but content showing out of the box. Below is the example, blue overlay is the overlay of inspection and inside content is getting down:
Just tried to create a new project and check. I am still getting the same issue in new project too.
I found setting the top margin for scroll-content seems to override this issue, so I’m thinking it has something to do maybe with either the status bar or perhaps the new safe inset margins for iOS 11…
Not sure, but it does seem to do with margin or padding on the scroll content element.
The problem with the below CSS is that it looks bad when first loading because there is no margin or padding, but when the blank space shows up (after navigating away and back to the home page) then it all looks correct.
.scroll-content {
margin-top: 0 !important;
}
Same problem here.
WKWebview installed
<plugin name="cordova-plugin-ionic-webview" spec="~1.1.7" />
Updated statusbar
<plugin name="cordova-plugin-statusbar" spec="~2.2.3" />
Ionic info
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 6.5.0
local packages:
@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.1.2 ios 4.3.1
Ionic Framework : ionic-angular 3.6.1-201709221952
System:
ios-deploy : 1.9.0
ios-sim : 5.0.8
Node : v6.11.3
npm : 4.6.1
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Misc:
backend : legacy
Simulator iPhone 7 Plus (IOS11)
EDIT : I think is beacause there is no <ion-header> tag in the page
I fix it
If you want no <ion-header> but still a statusbar visible.
Put a <ion-header> tag empty like this :
// yourpage.html
<ion-header></ion-header>
And in you scss :
// yourpage.scss
.platform-ios.platform-cordova {
page-landing {
.scroll-content {
margin-top: 20px !important;
}
}
}
and you get this :
I am having the same problem. Is there a hot fix for this?
I did the same but there is a issue with this code. At the first time when we don’t get space then our content is getting hide with header. After changing page we get the correct one. So for sure, this will not help.
This one cannot apply in our case. Because we have title and buttons in header. And we already have header but we are getting this space between header and content.
Yes, agreed. On first view of the page the content is cut off at the top, then after page change it’s fine.
Somewhere after page change Ionic (or status bar plugin?) is adding extra margin, I just don’t know where this is happening…
Have a look at this:
As suggested on github, I have installed this plugin and issue is solved now.
@gemcomputers @rindegastos @Teazy You can try this. I hope this will solve your issue too as we all are having same issue.
Works like a charm! thanks @aditya_1027!
Thanks @aditya_1027 this solved it for me too.
I had to first resolve some CORS issues with the WKWebView plugin, so it took some time to fix in my app.