I am using jquery mobile to create an app and I have fixed headers on all pages. I did this by using:

1. <div data-role="header" data-tap-toggle="false" role="banner" data-id="persistent" data-position="fixed">

However, one of my pages have textboxes and when I click within a text box to start typing, the fixed header disappears (i.e. it moves back up).

I added the following to my CSS file:

.. but now, that causes a little flicker. As the header attempts to move up, it immediately moves back down.

Can someone tell me how to keep the headers fixed (without a flicker) when a textbox is clicked on the page?

Thanks,

Sarah