I'm trying to correct a bug that's recently been triggered in my multi-page mobile application with a panel dialog. At random, JQuery seems to shorten the min-height of any given page, causing the black footer div to jump up and the side panel to shorten. This happens either when navigating to a new page or when opening the side menu panel.
I've attempted to manipulate the CSS per this threads: jQuery Mobile not resizing page correctly
And then attempted a JavaScript fix here using the window resize event: jQuery mobile page height
But neither have worked so far. It seems the "resize" event never fires, so the callback would never run. I'm not sure what other event I could try that would fire when using JQuery Mobile.
See the jsfiddle for the demonstration: http://jsfiddle.net/m8ws6479/
Code here:
<body>
<div data-role="page" data-position="fixed" id="page1">
<div data-role="panel" data-display="push" id="menu1" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu1">Menu1</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 1</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page2">
<div data-role="panel" data-display="push" id="menu2" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu2">Menu2</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 2</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page3">
<div data-role="panel" data-display="push" id="menu3" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu3">Menu3</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 3</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page4">
<div data-role="panel" data-display="push" id="menu4" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu4">Menu4</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 4</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
</body>
Changing your footer to this seems to solve the jumping:
JSFiddle