jQuery Mobile Fixed Footer Scrolls with Text One T

Question

I have created an iOS application using jquery-mobile (1.1.1) and Adobe PhoneGap Build. The app has a fixed header and footer and transitions are set to "none". The footer contains 4 navigational buttons, which provide navigation via javascript to the four pages within the app. I used a multi-page template, so there is a single HMTL file.

Originally, I was positioning the header and footer on the screen using "data-position:fixed", but was experiencing some unwanted flashing and page jumps when switching between pages. So, I switched to using CSS to fix the header and footer to the screen (as outlined in this post: https://github.com/jquery/jquery-mobile/issues/4024). This solved the flashing issue, but introduced a different one.

The problem is: the first time I scroll text, on any page, the footer moves along with the text (i.e. it does not stay fixed). But only the first time - from then on, whenever I scroll the text, the footer stays fixed as it should. To clarify, here a couple of examples:

Example 1

• Open app, scroll text on first page - footer moves.
• Switch to second page, scroll text - footer remains fixed.

Example 2

• Open app, switch to second page without scrolling on first page - footer moves on second page.
• Switch back to first page, footer remains fixed.

One other thing I should mention - if I enable page transitions, then the issue only happens on the first page. For example. if the app loads and I switch to another page without first scrolling the text on that first page, the footer remains fixed as it should.

Any suggestions on a way to fix this would be greatly appreciated. Thanks.

Answer 1

I just ran into the exact same issue and fixed it using the following hack when the app fires up. Note that we run this .js snippet before we manually hide the splash screen with the Phonegap/Cordova method. This should prevent any flickering/shifting before the user sees the home screen.

function fixJqmScrollBug() {
    window.scrollTo(0, 1);
    setTimeout(function() {
        window.scrollTo(0, 0);
        if( navigator && navigator.splashscreen ) navigator.splashscreen.hide()
    }, 20);
}

This code simulates the initial scroll that breaks your fixed footer the very first time, but puts it back to the default position. We had to put a slight delay on the repositioning back to scroll of (0,0) for the fix to work - hence the 20ms timeout.