iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177
I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing me to scroll down to an empty page. It seems like the total height is more than 200vh.
The webpage functions properly on Safari, but not on iPad Chrome.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>
css:
body {
height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: 100vh;
height: -webkit-fill-available;
}