title: jQuery Mobile Fixed Header and Footer scroll at the first moment. (Bug?)
body: <p>My question is about <code>JQM</code>. I'm currently developing an mobile app, which includes a fixed Header and Footer.
  On <code>Safari</code> and <code>Chrome (Mac)</code> everything works fine, but when i view the app on the <code>iPhone</code> or <code>iPad Safari</code>, the fixed Header and Footer doesn't stay on top at the first moment. After scrolling and stopping, the header and footer stay fixed, as they should.</p>
  
  <p>My source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;script src="phonegap.js"&gt;&lt;/script&gt;
          &lt;title&gt;Title&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
          &lt;link rel="stylesheet" href="jquery/jquery.mobile-1.2.0.min.css" /&gt;
          &lt;link rel="stylesheet" href="jquery/jquery.mobile.theme-1.2.0.css" /&gt;
          &lt;script src="jquery/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).bind("mobileinit", function() {
                  $.mobile.page.prototype.options.addBackBtn = true;
              });
          &lt;/script&gt;
          &lt;script src="jquery/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div data-role="page" id="master"&gt;
              &lt;div data-role="header" data-position="fixed" class="header-custom"&gt;
                  &lt;img src="images/logo.png" style="height: 44px;"&gt; &lt;a href="index.html" data-icon="refresh" id="refreshButton" class="ui-btn-right" style="fmargin-top: 4px;" data-iconpos="notext"&gt;Aktualisieren&lt;/a&gt;
  
              &lt;/div&gt;
              &lt;!-- /header --&gt;
              &lt;div data-role="content"&gt;
                  &lt;ul data-role="listview" id="rssListView"&gt;&lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /content --&gt;
          &lt;/div&gt;
          &lt;!-- /page --&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The custom header class:</p>
  
  <pre class="lang-css prettyprint-override"><code>/* Custom navbar */
  .header-custom {
      height: 44px;
      background-image: url(images/header.png);
      background-size: cover;
  }
  </code></pre>