Overlay Status Bar Delay


#1

I’ve seen a few issues mentioned here in regards to the status bar and while they’ve answered most of my questions, this one problem persists. On load the status bar is overlaid on the fullscreen app until the whole window is loaded… then it corrects itself. Notice this is an issue with Ionic’s vanilla starter apps as well… just load in some data that takes a bit longer to process.

Screencast: http://cl.ly/Urvk

Any ideas?


#2

@Tyler Thanks for providing a screen cast, really helps isolate the problem. So it seems you’re fetching you data at the same time as deviceready functions are trying to run. Are you defining how your status bar should be set up anywhere? If not, try putting this run function in right before your define your states.

Taken from the starter project:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });

#3

Right, that’s what I have right now… taken from the starter app… but as pointed out in the video even the starter app has the same problem, you just need enough content loading up to really notice it.


#4

Either way, it seems like a case of data trying load before all of the cordova functions have fired. I gave it a shot in a sample app myself with some images being loaded remotely and got the same results.

The only thing I can think of off the top of my head is to nest the fetching of data in a callback that runs after the statusbar has been set. @Calendee any thoughts on this?


#5

Why does it act the way it does in the first place? It doesn’t make sense that it wouldn’t know there was a status bar until all the content was loaded. Where’s the function that’s asking about that information? Seems like it’s deeper Ionic stack issue not requesting the appropriate information at a relevant time. Or maybe one of the default settings is giving an incorrect or undesirable value that is later updated. I don’t know enough to say.


#6

When device ready has fired, ionic applies specific classes and changes in styles to various components. So for the header-bar, on ios 7, the framework will adjust the height by 20px to fix the overlay.

A quick an easy fix would be to override the default size? Keep two versions of the ionic css in the merges folder (one modified for ios and one normal for android) then when you do builds, you will have the correct styles for ios and android. Does this make sense?


#7

Hmm… I’ve wondered what the merges folder was for and how it worked. I get the concept but do you mind pointing out more clearly how that works?


#8

Tyler try to check “Hide during application launch”. It shouldn’t be hard to find (It’s somewhere in your app’s settings)


#9

i checked the “hide during application launch” and it didn’t helped


#10

So the merge folder is a place for platform specific files that can be kept out of production but “merged” back into the www folder once you run cordova prepare.

I wouldn’t recommend doing this though. After thinking about it for a bit, it doesn’t really solve the underlying problem. Let me do some thinking and I’ll get back to you, alright?


#11

I am having the same issue. Does anyone know how to fix? Here is a video- https://www.dropbox.com/s/iht1axtkt3l90i1/demo.mp4


#12

Hmm for that, it just seems that the splash screen is being hidden too fast. I nice trick I use in my project level config.xml, I set AutohideSplashScreen to false, then hide it on my first controller.

config.xml

  <preference name="AutoHideSplashScreen" value="false" />

controller:

.controller( 'FirstCtrl', function ($scope){
    setTimeout(function () {
      navigator.splashscreen.hide();
    }, 100);
})

So this will hid the splash screen after 100 milliseconds once the first controller is loaded.


#13

This is similar to what I did. Works great. Timeouts may not work though if you have a lot of content or large files (image, videos, etc.) to load. Best to just wait until your content is finished loading so adding the $ionicPlatform.ready() function is what I ended up using. Still an issue I think Ionic needs to look at and find a native solution for.


#14

Well a native solution would work if we were using native header :smile:
I think a better solution would be to figure out how to handle loading assets.

If its taking this long and have cause this much of an issue, there should be a recommended way to handling http requests for data and how to defer it to after $ionic.platform.ready() has fired.

I’ll talk with the devs about a better solution or recommended way of doing this.


#15

I tried this but it still isn’t working for some reason? I even extended to 500 milliseconds. It doesn’t seem to effect the time. I added

setTimeout(function () {
      navigator.splashscreen.hide();
    }, 100);

like to my first and main controller, and I also added

  <preference name="AutoHideSplashScreen" value="false" />

to my config.xml in my root folder. Not sure why the timeout function is not registering?


#16

Which config.xml? The one at the project level out side of the www file? Also do you have the splash screen plugin installed?

You can use either ionic or cordova to install the plugin

$ ionic plugin add org.apache.cordova.splashscreen

#17

Any updates on status bar’s delayed adjustment? I’m running the beta 3 and the error still seems to be there.


#18

The have been looking at it and are working on finding a solution. When there is one, I’ll make sure to post it here