Fixed footer positioning incorrect if header, footer and panel are outside of page

[frequent]

JSBIN

If header, footer and a panel are outside of the page, the fixed footer is not being positioned correctly. In the JSBIN, resize the browser window and try to hide the toolbars. The header will hide correctly. The footer will jump to the middle of the screen.

Tested in Firefox

[patrioticcow]

I've been able to reproduce it, even with the footer and whatever else inside the page, see http://www.screencast.com/t/nHfjfwvN

when u tap / click the "ui-fixed-hidden" class appears and the footer jumps to meet the new height of the page

a fix could be:
hide: function( notransition ) {
var hideClass = this.options.transition === "slide" ? "" : "ui-fixed-hidden",
...

in the mobile.toolbar widget

[jaspermdegroot]

@frequent

This issue is because on "tap toggle" fixed toolbars get position: absolute;. The footer is outside the page so it's positioned absolute to the body. And because pages have position: absolute; as well the body doesn't have the same height as the page.

The only way we can fix this is by using position: relative; for pages. That's not a simple change (transitions, etc.) that we can do now, but we will look into that for a future version. As a quickfix I will hide fixed external footers completely instead of just switching to absolute position.

[frequent]

@uGoMobi

Hm. Makes sense. Thanks for the quick fix! Diving back into my pile of work...