Jquerymobile/Phonegap/iOS footer navbar not fixed upon first scroll

Question

I have a multi-page Jquerymobile 1.2 file. When I navigate to a page that requires scroll, the footer is no longer fixed, but jumps upon the first scroll. When I release my finger, the footer jumps back into place. This effect no longer occurs when I repeat the process on any other page within the multi-page document with a subsequent scroll.

Here is the code for the footer - this is used for all pages within the multi-page document (please note that it links to a couple of external files as well):

<div data-role="footer" class="nav-rp" data-theme="a" data-position="fixed" data-id="myfooter">
    <div data-role="navbar" class="nav-rp" >
        <ul>
            <li><a rel="external" href="index.html#index"  class="icon-index" data-icon="custom">Home</a></li>
            <li><a rel="external" href="index.html#route-1" class="icon-route" data-icon="custom">Route</a></li>
            <li><a rel="external" href="gallery.html" class="icon-gallery" data-icon="custom">Gallery</a></li>
            <li><a href="businesses.html" rel="external" class="icon-business" data-icon="custom">Business</a></li>
        </ul>
    </div>
</div>

Any guidance would be appreciated.

Answer 1

Think I have fixed my issue - it was related to the meta viewport tag at the top. I included height=device-height and that seemed to do the trick.