title: Inconsistent full screen height on Samsung Internet Browser
body: <p>When developing a full-screen app, I realized that the chromium-based Samsung Internet Browser reports inconsistent viewport height (be it using <code>window.innerHeight</code> or <code>document.documentElement.clientHeight</code>). The inconsistency arises from the first page load vs subsequent loads.</p>
  
  <ul>
  <li>When the page is first loaded on the device, the reported viewport height is around 96px taller than what it actually is. That is because the browser thinks it is scrollable, and the "minimal UI" triggered by scrolling will produce a visual viewport that is 96px taller than when it is first loaded.</li>
  <li>Subsequent refreshes of the same page will report the "correct" visual viewport height.</li>
  </ul>
  
  <p>Here is a gif that illustrates the issue:</p>
  
  <p><a href="https://i.stack.imgur.com/TlJ15.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TlJ15.gif" alt="Inconsistent reporting of viewport height in Samsung Internet Browser"></a></p>
  
  <p>In the gif above, I have positioned a red box at the bottom of the visual viewport. It is only visible after refresh, because that is when the height of the visual viewport is reported correctly.</p>
  
  <p>I can reproduce this problem on all Galaxy S-series devices as long as they are running 9.0.01.80 of the browser, with a consistent height difference of 96px.</p>
  
  <p><a href="https://i.stack.imgur.com/UZn65.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UZn65.png" alt="Tabulated results from inconsistent viewport height reported by Samsung Internet Browser"></a></p>
  
  <p>The same test page is accessible here on a GitHub pages repo: <a href="https://terrymun.github.io/viewport-height-test/" rel="nofollow noreferrer">https://terrymun.github.io/viewport-height-test/</a></p>
  
  <p>A quick setup of the page is as follow:</p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  html,
  body {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 100vh;
  }
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Samsung Internet Browser Viewport Height test&lt;/title&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui, viewport-fit=cover"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;textarea id="vh" readonly&gt;&lt;/textarea&gt;
  
    &lt;h2&gt;Filler text&lt;/h2&gt;
    &lt;p&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue condimentum, tincidunt arcu id, condimentum lectus. Fusce varius nibh in purus mollis, sed tempus enim tincidunt. Nam ullamcorper eu eros a feugiat. Suspendisse condimentum id urna
      vitae pulvinar. Ut blandit augue libero, a tempor neque aliquet in. Fusce lorem justo, tristique ut blandit non, porttitor ac urna. In imperdiet eget enim in consectetur. Mauris vestibulum est id erat facilisis efficitur. Suspendisse efficitur elit
      mi, et finibus turpis luctus ac.
    &lt;/p&gt;
    &lt;!-- &lt;p&gt; element is repeated until viewport is filled to at least 100vh --&gt;
  
    &lt;script&gt;
        &lt;!-- Reported value is always wrong on first page load --&gt;
        document.querySelector('#vh').value = window.innerHeight;
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>