nightly1839 iOS v6 statusbar issue again ok on v7.1

ionic-v1
1

Hi

Just updated to latest nightly (1839) and generated apps (android and ios).
And back to StatusBar and window height issues - all fine on Android v4.3 and iOS v7.1 but on my iPhone running iOS v6 the window height is not taking into account the statusbar - as you can see from the attached images.
Note: Works and looks fine on the emulator ios-sim

I can scroll the whole app up and down - it either hides behind statusbar or below the window at the bottom.

the code I use (that has worked for me for months now) to manipulate the StatusBar is as follows:

  app.run(function($rootScope, $http) {

  var showFullScreen = true,
      showStatusBar = true;

  ionic.Platform.ready(function(){
    if(window.StatusBar) {
      //ionic.Platform.fullScreen(showFullScreen, showStatusBar);
      StatusBar.overlaysWebView(true);
      //StatusBar.backgroundColorByName('green');
      StatusBar.backgroundColorByHexString("#43CEE6");  //Calm color
    }

Images follow:

and

any help would be great

thanks
Darren

2

Also have this problem in 2 of my apps.
I fixed the first one with the statusbar plugin, but fail to fix the 2nd one with that.
Very annoying and strange.

Anyway, I find in the ionic css that, they just increase the header bar height according css:

.platform-ios7.platform-cordova:not(.fullscreen) .bar-header {
  height: 64px; }
  .platform-ios7.platform-cordova:not(.fullscreen) .bar-header.item-input-inset .item-input-wrapper {
    margin-top: 19px !important; }
  .platform-ios7.platform-cordova:not(.fullscreen) .bar-header > * {
    margin-top: 20px; }
.platform-ios7.platform-cordova:not(.fullscreen) .has-header, .platform-ios7.platform-cordova:not(.fullscreen) .bar-subheader {
  top: 64px; }
.platform-ios7.platform-cordova:not(.fullscreen) .has-subheader {
  top: 108px; }

.platform-ios7.status-bar-hide {
  margin-bottom: 20px; }

So, I add css to my body, and it works fine:

<body ng-app="app" class="platform-cordova platform-ios7">
....
</body>

Not a good way. But if you just want to make it work, this can help.

3

Thanks. I will give is a go but as you say not an elegant solution.
Trying to understand what has changed to cause this as assuming a bug has been introduced on regressed.

4

Just an update if it helps

I reverted back to build 1569 (the ionic.min.css and bundle.min.js - a thats all I use) and the issue is definitely not there.
I tried a diff file on the two css files and couldn’t find anything obvious - but then again my css skills are not great

do hope you can find and solve this as I’d want the other benefits of the latest builds
thanks Darren

5

@darrenahunter So you’re not using ionic.Platform.fullscreen() but instead your own code to set the status bar?

ionic.Platform.ready(function(){
if(window.StatusBar) {
  //ionic.Platform.fullScreen(showFullScreen, showStatusBar);
  StatusBar.overlaysWebView(true);
  //StatusBar.backgroundColorByName('green');
  StatusBar.backgroundColorByHexString("#43CEE6");  //Calm color
}
6

Yes Adam

I have been using that code (think I actually picked it up of the forum) for ages now. Worked with most 0.9.xx and also with beta1 and nightlies up to 1569 but upgrading to 1839 has caused the above mentioned problem.

Not sure what changed between 1569 and 1839 to cause it - whether it was done by design or an old bug regressed but I’m hoping you can put it back or fix it.

I believe from reading these forums most days that quite a most use this method. It is mentioned here as an example http://forum.ionicframework.com/t/best-way-to-set-statubar/2986. Maybe a lot don’t test on a iOS v6 actually device nowadays.

Many thanks for replying

7

just letting you know this issue is still there with beta 2

8

Hi Adam

I have tried beta 2 and problem still exists.
I have tried including the fullScreen call and commenting out the overlaysWebView line in code sample above and still has problems with screen height and ends up looking like pics I put up earlier in this thread.
I have tried fullScreen and overlaysWebView - tried most combinations and still problem is there.
If I fall back to 1569 it is ok. Problem is mainly with iOS6 but have seen it on iOS7 with one of the code combinations I did try. This is always on a physical device. iPhone4

All I can assume is something changed between 1569 and current code. I know it took a lot of fiddling with combinations to get screen height and statusbar working how I liked it and was happy with it up to and including 1569.

Should I raise an issue - are others finding this too - haven’t had much comment on this thread.

Thanks
Darren

9

Another update on this issue

I have tried with iPhone 5 running iOS7 and the app looks fine.

The problem is really on the iPhone4 running iOS 6 (sorry I don’t have and iPhone5 running iOS6 - is there even such a combination).

I tried ‘guoqiao’ suggestion above of putting ’ class=“platform-cordova platform-ios7” ’ on the body tag. This didn’t fix problem - actually made worse. Also made app look terrible on Android.

Running out of ideas now - best I can do is revert to 1569 - but I am missing a lot of the fixes and features of beta2

10

Yes, this solution works for me because I use ios7, and the platform-ios7 class only works in ios7.
Sorry for no help for you.

11

Hi

Just tested on latest beta 3 and latest nighty and above issues still exist

thanks

I will log an issue now

12

I am experiencing the same issue. I tried tracking it down and as far as I can tell the problem got introduced in 1836 with this commit: (ae3318a).

Issue

Regards,
Joram

13

The automatic viewport changes is the source of this issue. I’m currently working on a more robust system to update the viewport depending on platform/version/device/phone/tablet/orientation/etc (along with unit tests for each). Should have this in nightly soon, thanks