Problems with header height on startup

I am using the statusbar plugin on ios 8 and testing on iphone. The StatusBarOverlaysWebView is set to true in the plugin.xml. I have a dark background hence I have to use this plugin to get white text (otherwise the test gets black).

Everything works fine except…
After the splashscreen is finished loading there is a split second where the status bar text overlays the header text from the view title (the header height is too small for a short time). After everything is finished loading the header jumps down to the correct size allowing space for the header title… This only occurs if I have the statusbar plugin installed. The final result is of course correct but the jump in the header is quote annoying.

Not the greatest but I fixed this by adding a directive and css to the nav bar.

CSS sets the opacity of the navbar to 0 and adds CSS3 attributes to the navbar so when the opacity changes it’s gradual (a fade). Directive adds a class to the navbar after 200ms that sets the opacity to 1.

So basically when the app initially loads it has the header hidden while it’s doing all that jumpy stuff and then after 200ms it elegantly fades in. Client likes it b/c it gives the appearance like it was loading and now it’s good to go.

Thanks for the reply. The opacity idea is a good idea, but the problem is that its not just the header that jumps down but the entire page jumps with it. So if I just use opacity on the header it will still have the jump effect on the rest of the page. The fact is that the content loads first before it jumps down - that is after the databinding has occured first time in angular. I guess I could set opacity to 0 on the entire navview too.
(If I remove the statusbar plugin of course this does not happen)


Kk here’s another idea… Splash screen!

Create a div that looks just like your splash screen or a different one that just has like a loading icon in the center of it and says some loading text!

Have that cover the entire screen with a position fixed and a huge z-index. Then after 300ms have it elegantly slide down via CSS3 and reveal ur content! By this point the user will see a pristine screen.

Hows that?

Its all good ideas. altough the sliding thing might be a bit too much.
However I wonder - how could this be fixed in the ionic framework or in the statusbar plugin itself. Surely this is not a bug that is sustainable.