When using viewport height with the minimal-ui the very first time the page load the height is evaluated with the address bar so even if I set a div with a height of 100vh the acutal height of the div is viewport height minus the height of the address bar.
In this example, on the very first load I can see the purple div after the address bar is hidden. If I reload the page or access the page without deleting the cache, the red div occupy the full height of the viewport without taking in consideration the address bar which is the behavior I'm expecting on the first load.
Any ideas why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<title></title>
</head>
<body style="margin: 0; padding: 0;">
<div style="background-color: red; height: 100vh;">
Hello
</div>
<div style="background-color: purple; height: 50px;">
World
</div>
</body>
</html>
Thank you!
