jQuery Mobile and header/footer issue

Question

With jQuery Mobile does anybody know why when using the changePage() function to change to a page where the content exceeds the height of the viewport does the header of the page disappear and the footer appear in view over the top of the content?

This only happens when you use a transition to change page, if you change page without a transition the header remains and the footer is correctly positioned at the end of the content.

Thanks

Answer 1

I've been troubleshooting this issue all morning because I was having the same one. I don't exactly know what is wrong with the jQuery mobile script, but for some reason it is failing to hide the x-axis overflow for the inactive windows after a page transition effect. I fixed the problem by putting the following CSS inside the page div of the page being transitioned to.

.ui-mobile, .ui-page { overflow-x: hidden!important; }