Ionic-framework: White Space Between Header and Content

[aditya27dev]

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:

I have posted this issue on ionic forum too.
https://forum.ionicframework.com/t/white-space-between-header-and-content/106733

[kensodemann]

Hello! Thank you for opening an issue with us!

Have you applied all of the changes mentioned here? https://blog.ionic.io/ios-11-checklist/

One note on that is that version 3.7.0 of the Ionic Framework is scheduled to be released sometime today, which you would then use instead of the nightly build that is mentioned. Otherwise, all of those instructions should still be valid.

If you still get the white bar after that, please provide a sample application via GitHub that demonstrates your issue so we are able to duplicate it for our fixing and testing.

Thank you for using Ionic

[mhartington]

@MrPeproni I will also add that with iOS 11, we're pushing folks to upgrade to the new wkwebview plugin.

https://github.com/ionic-team/cordova-plugin-ionic-webview

As UIWebview has many issues, WKWebview fixes all of them. Including this odd gap in apps

[aditya27dev]

@kensodemann Please check my ionic info

```@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.2.1

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.1 
ios-sim           : 5.0.12 
Node              : v6.11.0
npm               : 3.10.10 
OS                : macOS Sierra
Xcode             : Xcode 9.0 Build version 9A235

Misc:

backend : legacy

[centos94]

@MrPeproni i had the same problem.
I was able to fix it adding WKWebView.
Here a guide that explain how to implement the change.

[aditya27dev]

@centos94 Trying to install this.

[kensodemann]

As @centos94 and @mhartington have pointed out (and as is suggested in the blog post I previously linked), you should try WKWebView.

General comments on your ionic info which probably have nothing to do with this particular issue, but could save you time in the future.

Your version of the Ionic Framework (3.2.1) is old. At this point though, 3.7.0 is so close that I would wait until it is announced and then upgrade to that.

There will also be an upgrade to @ionic/app-scripts coming out that you will want to grab as well. That won't solve this issue, but you will want it.

Your cordova-ios plugin is slightly outdated. The latest is 4.5.1, but if you install that you will need to remove the deprecated console plugin. More info: http://cordova.apache.org/news/2017/09/22/plugins-release.html

That is all that sticks out at me from your ionic info

[aditya27dev]

@kensodemann @centos94 @mhartington Thanks to all for the help. Installed WKWebView and issue is solved now.

But getting Preflight response is not successful error. I think backend developer can solve this.

@kensodemann Thank you for reviewing my ionic info. I hope Ionic Framework 3.7.0 is good.

[centos94]

@MrPeproni if backend developer can't solve that, in the page that i linked you before, there is a workaround at that problem, specifically at this point.

[kensodemann]

Glad to hear that took care of your issue. I am going to close this now. Thank you again for using Ionic.

[gregor-srdic]

I don't think this issue is solved, I am still seeing this both in regular web view and wk web view on ios 11 - with wk web view it does not appear immediately, but after the page is re-rendered (if you press a button etc). This issue also only appears if the scroll content is bigger than the content itself (if the page is scrollable).

[mhartington]

@gregor-srdic can you provide a sample project and push it to github for testing. Please open a new issue as well.

[gregor-srdic]

in iOS 11.1 this issue has been fixed for me

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.