windows phone 8 HTML5 viewport is higher than the screen after update to 8.0.10328.78

Question

I'm developing an existing Cordova app that I want to port to windows phone 8. After applying a few fixes for gradients and the viewport issue all seemed to work. Yesterday I've updated my phone (Lumia 520) to a newer version (8.0.10328.78) and suddenly the fixed footer is partly outside the viewable area of the screen.

I've reduced the code as much as I could and applied every variation of the device-width/device-height fixes I could find.

The most basic case appears even in the HTML5 sample app if only

<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div>

is added to it. You can only see the top 10 pixels, unless you scroll down. Furthermore it's not like the footer isn't fixed, because if you create a very long page (multiple screen lengths) the footer will stay in that same spot (about 20 pixels out of view, until you've scrolled to the bottom completely) If you do scroll down completely the top 20 pixels of the header will be hidden.

The sample app already has the

@-ms-viewport{ width: 320px; }

in it by default. But actually the issue I'm seeing now it different than the one that was fixed by adding that. (in the old case, you would see the footer floating about 20pixels above the bottom, but even when the ms-viewport section is removed, that does not happen anymore.)

In addition I did a few measurements:

window.screen.height => 800
window.innerHeight => 512
window.outerHeight => 512
$(window).height() => 533

Answer 1

old question but, as of Jan 2015 and as far as I know for Lumia 520+wp8.1,

<preference name="fullscreen" value="true"/>

in config.xml does the trick, leaving system tray in his place. You can put it in platform specifics

<platform name="wp8">
    <preference name="fullscreen" value="true"/>
</platform>