title: position fixed stucks on mobile device with webkit overflow scrolling
body: <p>I have a simple HTML in which header is fixed and only the body content should have elastic scroll. Now the problem is coming when you scroll towards up and wait until the scrollbar is hidden and try to scroll again it freezes scroll and won't let you scroll for few seconds. Or is there anyway without position:fixed I can make the div static. It is just coming on mobile iOS devices.</p>
  
  <p>Please check the <a href="https://drive.google.com/file/d/0B3sTbS5PHVwGNGVvZGpSbkxEcms/view?usp=sharing" rel="nofollow">video</a> as well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Sohail&lt;/title&gt;
          &lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /&gt;
          &lt;style type="text/css"&gt;
              body {
                  height: 100%;
                  -webkit-overflow-scrolling: touch;
                  background-color: red;
              }
              div {
                  overflow-y: scroll;
                  height: 100%;
                  background-color: green;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="position:fixed;width:100%"&gt;
              &lt;div style="height: 20%;background-color: yellow;"&gt;
                  Header
              &lt;/div&gt;
              &lt;div&gt;
                  Sohail Hussain&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  FDSFSDFDSFS&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                  ABCDEFGHI
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>