Hi,
I am using jquery-2.1.0 and jquery.mobile-1.4.2.
I am using following code to build footer for my mobile app:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a data-prefetch="true" href="reports.html" data-icon="eye" class="ui-btn-active ui-state-persist">Reports</a>
</li>
<li>
<a data-prefetch="true" data-icon="phone" href="survey.html">Survey</a>
</li>
<li>
<a data-prefetch="true" data-icon="mail" href="queries.html">Queries</a>
</li>
<li>
<a data-prefetch="true" data-icon="grid" href="misc.html">Miscellaneous</a>
</li>
</ul>
</div>
</div>
Now after the page is displayed with footer, when I click on the empty page area(on brown area in the content, refer screenshot), three footer items get disappeared. When I click again, they again reappear. This continues.
I dont know where I have done mistake? Could please someone help? Please refer the screenshots to get better idea of the issue. Thanks in advance.
Is updating to jquery mobile 1.4.3 can help in this issue?