When developing a full-screen app, I realized that the chromium-based Samsung Internet Browser reports inconsistent viewport height (be it using window.innerHeight or document.documentElement.clientHeight). The inconsistency arises from the first page load vs subsequent loads.
- 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.
- Subsequent refreshes of the same page will report the "correct" visual viewport height.
Here is a gif that illustrates the issue:
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.
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.
The same test page is accessible here on a GitHub pages repo: https://terrymun.github.io/viewport-height-test/
A quick setup of the page is as follow:
CSS:
* {
box-sizing: border-box;
}
html,
body {
position: absolute;
top: 0;
right: 0;
left: 0;
overflow: hidden;
padding: 0;
margin: 0;
height: 100vh;
}
HTML:
<!doctype html>
<html>
<head>
<title>Samsung Internet Browser Viewport Height test</title>
<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">
</head>
<body>
<textarea id="vh" readonly></textarea>
<h2>Filler text</h2>
<p>
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.
</p>
<!-- <p> element is repeated until viewport is filled to at least 100vh -->
<script>
<!-- Reported value is always wrong on first page load -->
document.querySelector('#vh').value = window.innerHeight;
</script>
</body>
</html>
