title: Position fixed on Chrome mobile causing issues when scrolling
body: <p>I've been researching this issue for the past hour and saw similar questions but I'm not sure they are the same exact problem. Probably related, somehow, but none of the answers helped me fixed my issue.</p>
  
  <p>Take the following code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;style&gt;
              html, body {
                  height: 100%;
                  margin: 0;
              }
  
              main {
                  background-color: orange;
                  height: 1500px;
                  margin: 50px;
              }
  
              footer {
                  background-color: green;
                  position: fixed;
                  height: 50px;
                  left: 100px;
                  right: 100px;
                  bottom: 100px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;main&gt;&lt;/main&gt;
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This hard to debug because I can't seem to reproduce the problem consistently. I keep scrolling up and down - making the address bar on Chrome for Android show and hide - eventually, something like this will happen:</p>
  
  <p><a href="https://i.stack.imgur.com/WKXSr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WKXSr.png" alt="enter image description here"></a></p>
  
  <p>For some reason, the <code>footer</code> is being drawn in the correct place (as specified by the CSS), but Chrome dev tools detect the element in a different position (not always like the screenshot shows).</p>
  
  <p><strong>Why is this a problem?</strong></p>
  
  <p>Assume I have clickable elements inside <code>footer</code>, the clickable area for those elements will be in the "blue" area detected by Chrome dev tools and not where the footer is actually being drawn (the green area), as it should because that's what the user is seeing.</p>
  
  <p>Thoughts?</p>