# White Space Between Header and Content

**URL:** <https://forum.ionicframework.com/t/white-space-between-header-and-content/106733>\
**Category:** ionic-v3\
**Created:** [September 26, 2017, 5:28am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733 "2017-09-26T05:28:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 26, 2017, 5:28am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/1 "2017-09-26T05:28:46Z")

</div>

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:

![32 AM](https://global.discourse-cdn.com/ionicframework/original/3X/e/3/e3c222f23ab90cb0e505f6f624183bbf7b571d8f.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 26, 2017, 5:32am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/2 "2017-09-26T05:32:18Z")

</div>

Did you follow all steps of [https://blog.ionic.io/ios-11-checklist/](https://blog.ionic.io/ios-11-checklist/)?

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 26, 2017, 5:41am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/3 "2017-09-26T05:41:37Z")

</div>

@reedrichards yes i have followed all the steps

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 26, 2017, 5:47am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/4 "2017-09-26T05:47:38Z")

</div>

Please guide me on how can i solve this

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 26, 2017, 5:49am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/5 "2017-09-26T05:49:31Z")

</div>

Sorry I wish I could but except knowing that all steps for iOS11 should be followed I don’t know more than you ☹

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 26, 2017, 5:55am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/6 "2017-09-26T05:55:07Z")

</div>

viewport-fit=cover this is giving this issue. I just removed it and it’s working fine but status bar is white now

---

<div class="post-metadata">

**Author:** ![gemcomputers](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gemcomputers/32/112710_2.png) [@gemcomputers](https://forum.ionicframework.com/u/gemcomputers)\
**Post date:** [September 26, 2017, 3:11pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/7 "2017-09-26T15:11:21Z")

</div>

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)

 ![IMG_2124](https://global.discourse-cdn.com/ionicframework/original/3X/5/e/5ef5556a39455bbd4d8d00e6d0240a7af24e6859.jpg)

With viewport-fit=cover on home page load, before navigating to any content:

 ![IMG_2124](https://global.discourse-cdn.com/ionicframework/original/3X/5/e/5ef5556a39455bbd4d8d00e6d0240a7af24e6859.jpg)

After navigating, the white space shows up below the header:

 ![IMG_2126 2](https://global.discourse-cdn.com/ionicframework/original/3X/d/2/d2db2b1d3fc6e9b3859338ddc0d10767a76aa64e.jpg)

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… 😕

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 27, 2017, 4:26am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/8 "2017-09-27T04:26:15Z")

</div>

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:

![03AM](https://global.discourse-cdn.com/ionicframework/original/3X/7/6/76cf9005d2c75658892e7b3f7a9eadbd95d78372.jpg)

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 27, 2017, 4:55am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/9 "2017-09-27T04:55:57Z")

</div>

Just tried to create a new project and check. I am still getting the same issue in new project too.

---

<div class="post-metadata">

**Author:** ![gemcomputers](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gemcomputers/32/112710_2.png) [@gemcomputers](https://forum.ionicframework.com/u/gemcomputers)\
**Post date:** [September 27, 2017, 1:26pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/10 "2017-09-27T13:26:57Z")

</div>

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.

```auto
.scroll-content {
        margin-top: 0 !important;
    }

```

---

<div class="post-metadata">

**Author:** ![Teazy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Teazy](https://forum.ionicframework.com/u/Teazy)\
**Post date:** [September 27, 2017, 2:50pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/11 "2017-09-27T14:50:27Z")

</div>

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

```auto
    @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)

 ![58](https://global.discourse-cdn.com/ionicframework/original/3X/3/1/31290a6528f2960fc3e271e2077f74b133c3a381.png)

EDIT : I think is beacause there is no `<ion-header>` tag in the page

---

<div class="post-metadata">

**Author:** ![Teazy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Teazy](https://forum.ionicframework.com/u/Teazy)\
**Post date:** [September 27, 2017, 3:19pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/12 "2017-09-27T15:19:05Z")

</div>

I fix it

If you want no `<ion-header>` but still a statusbar visible.

Put a `<ion-header>` tag empty like this :

```auto
// yourpage.html
<ion-header></ion-header>

```

And in you scss :

```auto
// yourpage.scss
.platform-ios.platform-cordova {
  page-landing {
    .scroll-content {
      margin-top: 20px !important;
    }
  }
}

```

and you get this :

![32](https://global.discourse-cdn.com/ionicframework/original/3X/7/5/751b15d0bb134f36ed1c4f94ea24b67a85e4b930.jpg)

---

<div class="post-metadata">

**Author:** ![rindegastos](https://avatars.discourse-cdn.com/v4/letter/r/49beb7/32.png) [@rindegastos](https://forum.ionicframework.com/u/rindegastos)\
**Post date:** [September 27, 2017, 11:04pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/13 "2017-09-27T23:04:18Z")

</div>

I am having the same problem. Is there a hot fix for this?

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 28, 2017, 4:02am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/14 "2017-09-28T04:02:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 28, 2017, 4:03am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/15 "2017-09-28T04:03:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gemcomputers](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gemcomputers/32/112710_2.png) [@gemcomputers](https://forum.ionicframework.com/u/gemcomputers)\
**Post date:** [September 28, 2017, 7:35am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/16 "2017-09-28T07:35:58Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 28, 2017, 8:37am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/17 "2017-09-28T08:37:33Z")

</div>

Have a look at this:

> <https://github.com/ionic-team/ionic/issues/12991#issuecomment-332649280>

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [September 28, 2017, 11:23am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/18 "2017-09-28T11:23:21Z")

</div>

As suggested on github, I have installed this plugin and issue is solved now.

> **[Ionic Framework](https://ionicframework.com/docs/wkwebview/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

@gemcomputers @rindegastos @Teazy You can try this. I hope this will solve your issue too as we all are having same issue.

---

<div class="post-metadata">

**Author:** ![rindegastos](https://avatars.discourse-cdn.com/v4/letter/r/49beb7/32.png) [@rindegastos](https://forum.ionicframework.com/u/rindegastos)\
**Post date:** [September 28, 2017, 8:29pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/19 "2017-09-28T20:29:22Z")

</div>

Works like a charm! thanks @aditya_1027!

---

<div class="post-metadata">

**Author:** ![gemcomputers](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gemcomputers/32/112710_2.png) [@gemcomputers](https://forum.ionicframework.com/u/gemcomputers)\
**Post date:** [September 29, 2017, 1:41pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/20 "2017-09-29T13:41:29Z")

</div>

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.

[Next page](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733.md?page=2)