1. Header bar containing a button and a popup that is opened by clicking the button.
2. An area containing between 1 and 4 HTML5 canvases. Canvases can be added/removed and are resized dynamically to fill the middle part of the window with no spaces between them.
3. A div containing a few buttons and a slider.

Everything is in the correct position and dynamically resized when the window is resized. Before the button is clicked, everything is fine. When the button is clicked, the popup appears just fine, but the 4 canvases are knocked out of their block quadrant and stretch the page to the point of a scrollbar appearing. Strangely, when I restore down and then maximise, the canvases are back in their correct positions and the popup remains where I want it. Whenever I close and open the popup, the canvases are knocked out of place again. 

I haven't found anyone else who has had this problem; i.e. popups affecting existing layout. 

HTML for popup (this is a simplified version of the one I actually use, but has the same effect):

2.         <div id="header" data-role="header">  
3.           <a id="menu-button" data-transition="pop" href="#simplepopup" data-role="button"
4.              style="margin:0; padding:0;">Open Popup</a>
5.           <div data-role="popup" id="simplepopup"> 
6.             TEST
7.           </div>
8.         </div>

JS for popup:

2.   $("#menu-button").click(function () {
3.       $('#simplepopup').popup('open', {positionTo: "window"});
4.   });

Boiling this down to one question: why would opening a jQM popup affect the background layout?

James Brill