title: jQuery-Mobile - GAP between header and content
body: <p>When navigating with <code>$.mobile.changePage("#page2");</code> I realized that jQM adds 1-3px gap under the header on the next page.</p>
  
  <p>When calling the photolibrary with Cordova to select a photo, the gap will disappear, but I don't need the camera plugin, I want the gap not to appear in the first place.</p>
  
  <p><em>(I am not talking about the white gap that gets added to the bottom when calling camera plugin - and can be resolved by changing the self web view in MainViewController under viewWillAppear - or any other of the gap issues I found)</em>.</p>
  
  <p><strong>The gap I am talking about is between header and ui-content.</strong></p>
  
  <p>I have been working with jQM before and the versions I used in past projects have not caused any similar problem.</p>
  
  <p>I am using <strong>jQM 1.4.2</strong>, <strong>JQuery 1.11.0</strong> and <strong>Cordova 3.1.0</strong>.</p>
  
  <p>Here are 2 images, I changed to colors to make the problem more obvious.</p>
  
  <ul>
  <li>darkgray -> header</li>
  <li>red -> <strong>ui-page</strong> background</li>
  <li>blue -> first (and only) DIV element in <strong>ui-content</strong></li>
  </ul>
  
  <p>1 image: no gap - this is if the page is the INDEX page</p>
  
  <p>2 image: this is when the page is page 2 and gets navigated to with changePage</p>
  
  <p><img src="https://i.stack.imgur.com/fq9uK.png" alt="no gap - this is if the page is the INDEX page">
  <img src="https://i.stack.imgur.com/4NDRS.png" alt="gap - this is when the page is page 2 and gets navigated to with changePage"></p>
  
  <p>Between header and first DIV in content you can see a gap.</p>
  
  <p>I have commented out every single line of code, except the basic structure and those to color the elements. Plus, the page WILL appear without gap IF it is the MAIN page. However, if I have a different main page and tap on a div which calls <code>$.mobile.changePage("#page2");</code> the second page will be shown with a gap between header and content.</p>
  
  <h2>edit - UPDATE:</h2>
  
  <p>I created a clean project just to reproduce this issue. I don't know how to resolve it and if I can't fix this I can't continue with any project, because this happens in every Project with jQM 1.4.2:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script type="text/javascript" charset="utf-8" src="cordova.js"&gt;&lt;/script&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" /&gt;
  
      &lt;link rel="stylesheet" href="jquery.mobile-1.4.2.css" /&gt;
      &lt;script src="jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.mobile-1.4.2.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).on('tap', '#gotop2', function(event){
                         event.preventDefault();
                         //$.mobile.changePage('#p2');
                         $.mobile.pageContainer.pagecontainer("change", "#p2")
                         });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div data-role="page" id="p1"&gt;
          &lt;div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1"&gt;
              &lt;h1&gt;page 1&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content" style="padding:0px; margin:0px;"&gt;
  
              &lt;div id="gotop2"&gt;go to page2&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div data-role="page" id="p2"&gt;
          &lt;div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1"&gt;
              &lt;h1&gt;page 2&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content" style="padding:0px; margin:0px;"&gt;
  
              &lt;div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Don't forget to include jQ or jQM in the folder.</p>
  
  <p>If you call <strong>"/index.html"</strong> in you browser and navigate to the second page you will see the gap.</p>
  
  <p>If you call <strong>"/index.html#p2"</strong> directly in the browser there won't be any gap.</p>