Phonegap Cordova - Black Status Bar On Bottom After Fullscreen

I've been having this issue for as long as I can remember. I thought it might have just been from my phone or the emulation, but after publishing my app I still see this black rect

Solution 1:

I experienced the very same issue using only <preference name="Fullscreen" value="true" /> in my config.xml.

I initially thought of the Android status bar, but had some research on that topic and now got a very strong believe, that this issue comes from some other Android system UI not being hidden until the Cordova wrapper finished init, resulting in a wrong calculated size for the wrapper.

After a long search and trying out nearly everything you also mentioned, I stumbled upon a plugin:

cordova-plugin-fullscreen

I'm now using this in the config.xml

<preferencename="Fullscreen"value="true" /><preferencename="AndroidLaunchMode"value="singleInstance" /><preferencename="DisallowOverscroll"value="true" /><preferencename="KeepRunning"value="true" />

And this directly in first play of the method triggered on deviceready

if (AndroidFullScreen) {
    // Extend your app underneath the status bar (Android 4.4+ only)
    AndroidFullScreen.showUnderStatusBar();

    // Extend your app underneath the system UI (Android 4.4+ only)
    AndroidFullScreen.showUnderSystemUI();

    // Hide system UI and keep it hidden (Android 4.4+ only)
    AndroidFullScreen.immersiveMode();
}

Tested so far with Android 6.0, 5.0.1 with hardware navigation and software navigation devices. Maybe that could help you aswell.

Solution 2:

You can use cordova hooks to apply the android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" fix to AndroidManifest.xml or you can use <edit-config> in config.xml starting with cordova@6.4.0:

<widget ... xmlns:android="http://schemas.android.com/apk/res/android"> ... <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /> </edit-config> ... </widget>

Source: Cordova fullscreen splash screen on Android still shows title bar

Solution 3:

By default the DOM will only fill the space required to render its contents. Setting an element height:100%; is setting it's height relative to its parent element's height. If you want the visible element to be the height of the screen, you can set the element height:1vh; which is the height of your screen. This might cause some unexpected scrolling behavior though, so another method is to set all the parent elements height:100%;, starting with the html document. in css:

html, body, ... other parent elements ... {
   height:100%;
}

Solution 4:

You might want to poll the display/canvas size for changes.

That black band looks like it's about the same size as the system's top status bar, so I suspect that your app is receiving the viewport size just before the status bar is removed/animated by the system.

Solution 5:

Seems that the problem is with defining the dimensions of the canvas. Solved this a while ago so I'm not sure if this is what fixed it:

var c  = document.getElementById("canvas1");
var ctx  = c.getContext("2d");
var pixelRatio = window.devicePixelRatio || 1; // get pixel ratio of device
c.width = window.screen.width * pixelRatio;
c.height = window.screen.height * pixelRatio;
c.style.width = window.screen.width + 'px';
c.style.height = window.screen.height + 'px';

Also try deleting your index.css file