0

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;
}
Observablerxjs
  • 692
  • 6
  • 22
Red Hood
  • 3
  • 3

1 Answers1

0

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.

yeho
  • 132
  • 2
  • 13
  • Originally that was my thought that I was dealing with glitch or bug there are tons of sites which implement described desire so there must my hack, fix or something. At least I hope – Red Hood Mar 30 '20 at 22:52
  • It might be because their sites are much bigger. Try setting a div with 5000px height and seeing if it works as intended. – yeho Mar 30 '20 at 22:55
  • As I mentioned adding extra content just makes it to take arbitrary amount of scrolling before address bar slides up – Red Hood Mar 30 '20 at 22:58