jQuery mobile fixed header issue in iPad

Question

I'm building a Hybrid app for iOS with jQueryMobile. My header and footers are fixed throught the app. So initially i've gone with data-position="fixed". When a form element gets focus, iPad Keyboard pops up and pushing the entire page alignment such that the focused field is visible.

While leaving the field, iPad keyboard slides down. This is leaving my header dives to the center of the page.

My futile attempts:

1. Removed data-position="fixed" included all the css (position:fixed; top:0;) in my styles.

2. On blur of input field injected positioning script

   $('input').live('blur',function(){setTimeout(function(){ $('#header').css('position','fixed');},150);

3. Inserted view port <meta> tag on blur function.

Referred Fixes:

iPad bottom:0px issue

https://github.com/jquery/jquery-mobile/issues/5532

Inviting your valuable suggestions or workarounds..

Answer 1

Scrolling the entire page by 2px on leaving input field solves my issue. However it gives little bit of flickering effect.

$('input').live('blur',function(){
        setTimeout(function(){
            var pos = $('body').scrollTop();
            $('body').scrollTop(pos+'2');
        },10);
    });