JQM footer issue

Question

It makes my head. I have a footer with various navigation buttons:

<div data-role = "footer" data-position = "fixed" data-theme = "b" data-tap-toggle="false"> <div data-role="navbar"> <ul> <li><a href= "example.html" rel="external" data-icon="home" data-iconpos = "notext"></a></li> <li><a href="example2.html" rel="external" data-icon="info" data-iconpos = "notext"></a></li> <li><a href="example3.html" rel="external" data-icon="gear" data-iconpos = "notext"></a></li> </ul> </div> </div> 

On the simulator, all this is absolutely not a problem. However, on the device, when the keyboard opens, the footer passes over the keyboard for a second of a second, and then goes back, sometimes calling missclicks on navbuttons. I am using jQuery mobile 1.4.2, so I am wondering if there is a fix in this.

Note: the footer does not stay above the keyboard for the time the keyboard is entered, it just appears above it when the keyboard opens for about a second and then disappears.

EDIT: I saw all the decisions about hiding the footer when the text area is in focus, etc., but none of them seem to work for me.

EDIT: The device is an iPhone 4 and iPad mini, not sure of these details.

EDIT: In response to the people who commented, I tried to make jsfiddle recreate the problem, however I could not do it. Here is the problem on the iPhone 4:

Answer 1

Who cares, I finally found the answer. This was in my own mistake, I did not include: height = device-height in the code below. This happens in the head of my HTML

 <meta name="viewport" content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale=1, width = device-width, target-densitydpi = device-dpi height = device-height"/>