Recently I noticed the app I am working on displays really inconsistent behavior during scrolling on Chrome Android. Desired behavior is that scrolling up immediately hides address bar and scrolling down pushed back to the viewport. In my case it takes some scrolling around to make address bar to slide up. After that everything works as intended. (See included demo gif) It was pointed out to me to try longer content but no matter how long content is it takes arbitrary amount of scrolling to trigger slide up.
I really want to understand what's going here. I have seen sites sliding up as soon as first scroll appears and other sites with same behavior I described before. It would be nice to know what triggers slide so to plan content accordingly.
Demo gif of Unfortunate Scrolling
And here comes oversimplified code
In this demo I tried swapping % with vh, removing explicit sizing, setting overflow-y:scroll but nothing really helped
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" integrity="sha256-WAgYcAck1C1/zEl5sBl5cfyhxtLgKGdpI3oKyJffVRI=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>Scroll Like A Swan</title>
</head>
<body>
<div id="wrapper">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, rerum fuga corporis reprehenderit voluptate aperiam temporibus. Sequi vel nemo et molestias nihil, culpa quas recusandae fugiat, porro magnam accusamus? Sint maxime excepturi ipsam delectus ea rem perferendis mollitia adipisci! Impedit!
</div>
</body>
</html>
body{
background-color: yellow;
overflow-y: auto;
height: 100%;
}
#wrapper{
display: block;
background-color: orangered;
position: relative;
}
Unfortunately, there's really nothing you can do, as far as I'm aware.
This is something Google Chrome needs to fix. You, as a web developer cannot do much since the problem lies within Google Chrome and not your website.