Ionic CSS Styling Off when Deployed to iOS but fine everywhere else - ios

Question

So when I am looking at my app on android phones and in the browser, the header (and sub header) looks like the following
When I am running on iOS emulator, or deploying to iOS phone, it looks like the following:
The markup looks like the following
<ion-header-bar class="bar item-input-inset search">
<div class="buttons buttons-left header-item">
<span class="left-buttons">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</span>
</div>
<label class="item-input-wrapper search">
<input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
</label>
<button class="button button-clear" ng-click="clearSearch()">
<i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
</button>
</ion-header-bar>
<ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
<button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
style="color:#fff;"
class="button button-clear col col-33"
ng-click="quickSearch('featured',model.searchTerm)">
FEATURED
</button>
<button class="button button-clear col col-33"
ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
style="color:#fff;"
ng-click="quickSearch('nearby',model.searchTerm)">
NEARBY
</button>
<button class="button button-clear col col-33"
style="color:#fff;"
ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
ng-click="quickSearch('recent',model.searchTerm)">
RECENT
</button>
</ion-header-bar>
The CSS I have is the following:
.action-sub-header {
background-color: #007fff;
}
.item-input-inset {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 10.66667px;
}
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
.bar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid #ddd;
background-color: white;
/* border-width: 1px will actually create 2 device pixels on retina; */
background-size: 0;
}

Answer 1

The ion-header-bar has a specific css on ios to add space on top of it for the iOS statusbar. You have to override it in your case.
To test the ios specific css in your browser, edit the classes on the body tag. Replace platform-browser by platform-ios and platform-macintel or platform-windows by paltform-cordova.
When you have do that, you'll be able to see the specific style applied by the ionic css:
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px;
}
You just need to override it.

Answer 2

You need to add ionic.Platform.fullScreen(); to your $ionicPlatform.ready function.