Phonegap JQM posição fixa cabeçalho / rodapé move após ignorar o teclado iOS
Estou tentando usar o JQM em um projeto Phonegap para criar um cabeçalho e rodapé fixos em um aplicativo iOS. Eu tenho uma página que usa DIVs recolhíveis e tem uma entrada de texto dentro do DIV. Está tudo bem com o cabeçalho e o rodapé até eu expandir o DIV e inserir algo no campo de texto. Depois de descartar o teclado do iOS, o cabeçalho foi movido para cima e é sobreposto pela barra de "informações" dos iPhones, e o rodapé também deslizou para cima na página e não está mais fixo na parte inferior. Se eu expandir outro DIV dobrável depois disso, o rodapé volta para o local correto, mas o cabeçalho permanece sobreposto na parte superior da tela. Alguma idéia do que está acontecendo?
JQM Código da página:
<div data-role="page" id="wizard_3">
<div data-role="header" class="header" data-id="cls_header">
<h1>
<label>Testing®</label>
testProgram®</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" id="ability_set">
<div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion">
<h3 id="abilQuestion1Header">XXXXXXX </h3>
<p id="abilQuestion1Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability1" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion">
<h3 id="abilQuestion2Header">XXXXXXX</h3>
<p id="abilQuestion2Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability2" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion">
<h3 id="abilQuestion3Header">XXXXXXX</h3>
<p id="abilQuestion3Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability3" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion">
<h3 id="abilQuestion4Header">XXXXXXX</h3>
<p id="abilQuestion4Textr">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability4" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion">
<h3 id="abilQuestion5Header">XXXXXXX</h3>
<p id="abilQuestion5Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability5" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion">
<h3 id="abilQuestion6Header">XXXXXXXX</h3>
<p id="abilQuestion6Text">XXXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability6" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer" data-theme="b"> <span class="leftButton">
<input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/>
</span> <span class="rightButton">
<input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/>
</span> </div>
</div>