title: Stop page resize during transition with Jquery Mobile
body: <p>I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents. </p>
  
  <p>The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts? </p>
  
  <p>I've created a sample below to really illustrate the point.
  <a href="http://jsfiddle.net/fz7qs/2/">http://jsfiddle.net/fz7qs/2/</a></p>
  
  <pre><code>&lt;div id="pageContainer" style="position: relative !important; height: 100%;"&gt;
  &lt;div data-role="page" id="test1"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Page Title&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;a id="page2link"&gt;To Page 2&lt;/a&gt;
  
      &lt;div data-role="content"&gt;    
          &lt;p&gt;Page content goes here.&lt;/p&gt;        
      &lt;/div&gt;&lt;!-- /content --&gt;
  
      &lt;div data-role="footer"&gt;
          &lt;h4&gt;Page Footer&lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;div data-role="page" id="test2" style="height: 568px"&gt;
  
  &lt;div data-role="header"&gt;
      &lt;h1&gt;Page 2&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;a id="page1link"&gt;To Page 1&lt;/a&gt;
  
  &lt;div data-role="content" style="height: 50%;"&gt;
      &lt;p style="height: 80%; border: 1px solid black;"&gt;This is page 2&lt;/p&gt;        
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;div data-role="footer"&gt;
      &lt;h4&gt;Page Footer&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>