Why does my Cordova WebView have an extra 20px of

Question

I am building a Cordova app, and I'm testing it on my iOS 6 device (iPod Touch w/ iOS 6.1.6). For some reason, the WebView is scrollable with an extra 20px, seemingly making up for the 20px status bar at the top of the screen. This sometimes causes the scrollable WebView to take focus, essentially causing "nothing" to scroll in the eyes of the user, rather than allowing scrollable divs in my app to scroll. I have tried numerous fixes pertaining to config.xml changes, plugins, etc, but nothing makes a difference, which I've outlined below.

1. Tried manually hiding the status bar, with no effect.

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <feature name="StatusBar">
     <param name="ios-package" value="CDVStatusBar" />
   </feature>
   
   // index.js (ondeviceready):
   window.StatusBar && window.StatusBar.hide();
   

2. Tried forcing the status bar to overlay the webview, essentially making the app a full 480px tall (instead of 460px):

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <preference name="StatusBarOverlaysWebView" value="true" />
   

3. Tried forcing the status bar to not overlay the webview:

   // config.xml:
   <plugin name="org.apache.cordova.statusbar" version="0.1.7" />
   
   <preference name="StatusBarOverlaysWebView" value="false" />
   <preference name="StatusBarBackgroundColor" value="#000000" />
   <preference name="StatusBarStyle" value="lightcontent" />
   

4. Tried offsetting the body's margin-top by 20px, which just adds an extra 20px of dead whitespace:

   // index.css:
   body {
     margin-top: 20px;
   }
   

5. Tried setting the app to fullscreen, which literally has no effect on the app whatsoever:

   // config.xml:
   <preference name="Fullscreen" value="true" />
   

6. I even used Safari inspector to delete the body DOM node altogether, and it still scrolls 20px, telling me that it has nothing to do with the HTML so much as Cordova's implementation of the WebView.

Does anyone have a solution for this? I can't be the only one out there encountering this.

Answer 1

Figured it out after almost 8 hours of tinkering. Had to replace the meta viewport setting from this:

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, width=device-width,
        height=device-height, target-densitydpi=device-dpi" />

to this:

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

It seems that height=device-height was taking the full device height into account, including the status bar. I did see a way to work around this in JavaScript for those who are interested, which is covered by this StackOverflow answer. I don't see any drawback to removing altogether though (for a Cordova app targeting iOS 6+).

Answer 2

Did you try this on deviceready?

window.StatusBar.overlaysWebView(false);

https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/index.md

Answer 3

Ionic + AngularJs

.run(['$rootScope', '$state', function ($rootScope, $state) {
            //set status bar 
            $cordovaStatusbar.styleHex('#637386');
            $cordovaStatusbar.overlaysWebView(true);

            $rootScope.$on('$stateChangeStart',
                function(event, toState, toParams, fromState, fromParams) {
                    //for me was helpful this call
                    $cordovaStatusbar.overlaysWebView(true);

                });
}])