iOS7 status bar is transparent, messing with UI layout about mobile-chrome-apps

[mmocny]

Fixed this a few weeks ago. There is now the iOS statusbar plugin installed by default, and now new projects created with the cca tool will add a default cordova (StatusBarOverlaysWebView) to config.xml to push your app UI under the statusbar (just as in iOS6).

You can change this setting by editing the config.xml file and adjusting you app UI accordingly (and its advised to do so according to iOS7 style guide).

[mmocny]

For completeness I should also add that if editing the config.xml file does not appeal to you, you can modify the settings from JavaScript:

  StatusBar.overlaysWebView(false);
  StatusBar.backgroundColorByHexString('#ffffff');

In order to not see a flash of UI, I added these to my chrome.app.runtime.onLaunched handler in my background page, before issuing a chrome.app.window.create, so my background page looked like:

  chrome.app.runtime.onLaunched.addListener(function() {
    chrome.runtime.getPlatformInfo(function(info) {
      if (info.os === 'cordova-ios') {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByHexString('#ffffff');
      }
      chrome.app.window.create('index.html', {
        id: 'MyApp'
      });
    }
  });