Black bar when using fullscreen option

[David_K_9]

I am using HTML5 + Cordova + Phaser.io

When I have the XDK fullscreen option checked off (for either crosswalk or plain android builds) a black bar appears at the bottom of my screen.
I can tell that the bar is the size of the android status bar that is still visible on startup, but slides away because of the fullscreen option.

When I don't have fullscreen checked, then the screen looks normal. The only problem is I don't want the status bar to appear.

My guess is that the fullscreen option makes (0,0) of my game canvas start below the status bar, however the height calculates at the screen size with the status bar there making the game size come up short.

My viewport meta tag is: <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=0, target-densitydpi=device-dpi, minimal-ui" />

And to find the width and height I use:
var w = window.innerWidth * window.devicePixelRatio,
        h = window.innerHeight * window.devicePixelRatio;

Is there a way to get the height of the screen as if the status bar was not there?

I have tried various combinations of code and the only thing I could get to work was manually adding pixels to the height, which is not going to work well on other platforms.

[Elroy_A_Intel]

Can you provide an image that illustrates this issue?

The webview for your application is laid out to be between the top layout guide and bottom layout guide. For more information on the fullscreen option, visit https://crosswalk-project.org/documentation/screens.html.

[David_K_9]

[David_K_9]

Hi Elroy I attached the picture above. As you can see there is a black bar at the bottom that is the exact size of the toolbar. Also if all I change is unchecking the fullscreen box the bar goes away.

[Steven_B_1]

Hi David,

Did you manage to fix this? I have the exact same problem and documentation online is light.

Thanks,

Steve