title: Chrome on iPhone overflows content on empty page (on new tab only, not reload)
body: <p>On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
     &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1&quot;&gt;
        &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
        &lt;style&gt;* {
           box-sizing: border-box;
           }
           html{
            height:100%;
           }
           body {
            height:100%;
            background-color:yellow;
            margin:0 0;
            border: 30px solid red;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The border should be shown all around the viewport but is being hidden behind the bottom Nav bar. Here is the result from the code above:</p>
  <p><a href="https://i.stack.imgur.com/gPCgP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gPCgP.png" alt="New page / tab on Mobile chrome" /></a></p>
  <p><a href="https://i.stack.imgur.com/MpLnF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MpLnF.png" alt="After page reload" /></a></p>
  <p>Things I have tried (none of them worked):</p>
  <ul>
  <li>Removing &quot;width=device-width&quot; as described here:
  <a href="https://stackoverflow.com/questions/14195740/empty-html5-page-still-overflows-and-trigger-scroll-bars-on-mobile">Empty HTML5 page still overflows and trigger scroll bars on mobile</a>.</li>
  <li>Reload the page with JS. The problem is fixed when a user refresh the page by hand,not programmatically.</li>
  <li>Using transform to zoom in and out to force a refresh</li>
  </ul>
  <p>I have tried for a week to find a workaround but to no avail. Any help would be greatly appreciated</p>
  <p>Edit: My issue is different from <a href="https://stackoverflow.com/questions/30358630/html-body-not-filling-complete-width-on-mobile-devices">HTML body not filling complete width on mobile devices</a> as I don't have an issue with filling the body, I have an overflowing body issue and mobile chrome behaving differently on a new page as opposed to an existing page. The workarounds on the page didn't work for my issue</p>
  <p>My question is the following: Can somebody find a way using css or JS for the HTML body to not overflow when a new page is opened using the code above?</p>