JQM footer issue

Question

This is doing my head in. I have a footer with various navigation buttons like so:

<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 this all works perfectly no problem. However on a device, when the keyboard opens, the footer goes above the keyboard for a split second and then returns back down, sometimes causing missclicks on the navbuttons. I am using jquery mobile 1.4.2, so I'm wondering whether there is a fix to this.

Note: the footer doesn't stay above the keyboard for the duration of the keyboard input, it just appears above it when the keyboard opens for around a second and then disappears.

EDIT: I have seen all the solutions about hiding the footer when a textarea is in focus etc but none of them seem to be working for me.

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

EDIT: In response to the people that have commented, I have tried to make a jsfiddle recreating the problem, however I have been unable to do so. Here is the problem on an iPhone 4:

Answer 1

To anyone interested, I finally found the answer. It was through my own error, I didn't include: height = device-height in the code below. This goes 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"/>