title: Position fixed 100% isn't viewport width when a bigger div is present on the page
body: <p>I have a scenario where I have a fixed page header, which should be 100% of the viewport width, and a bigger element that is around 5000px wide and scrolls underneath the header.</p>
  
  <p>There seems to be several problems with mobile browsers not fixing the header and instead displaying a bigger (ratio calculated??) header which scrolls slower on iOS, and suddenly jumps when past the width of the header in terms of scroll position on android.</p>
  
  <p>Using 100vw for the header works, but then sometimes the header disappears at a certain breakpoint, and doesn't seem to be truly fixed positioned.</p>
  
  <p>Essentially the problem seems to be that a fixed element 100% != 100% of the viewport, i.e. 320px, but a calculated width that is somewhere in between the width of the viewport and the bigger element.</p>
  
  <p>Any help would be massively appreciated!</p>
  
  <p>A simplified code example is as follows...</p>
  
  <pre><code>&lt;!html&gt;
  
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/&gt;
  
          &lt;style&gt;
          * {
              margin: 0;
              padding: 0;
          }
  
          .a-div {
              position: fixed;
              width: 100%;
              height: 100px;
              z-index: 1;
              background: dimgray;
              border-left: 1px solid red;
              border-right: 1px solid pink;
          }
  
          .parent {
              width: 5000px;
              overflow: hidden;
          }
  
          .another-div {
              position: relative;
              width: 1%;
              height: 100vh;
              float: left;
              background: #5f9ea0;
          }
  
          .another-div:nth-child(even) {
              background: #add8e6;
          }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="a-div"&gt;&lt;/div&gt;
  
          &lt;div class="parent"&gt;
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
  
              &lt;div class="another-div"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>