CSS scroll-snaps overflows body when reaching top

Question

I'm having a pretty weird issue. Perhaps a bug in the scroll-snaps behaviour?

When I reach the top of the page and I keep scrolling up, then the body overflows and stays there if I do not scroll down again. Even when I reload the page.

Taking place only in Chrome for Mac (Version 75.0.3770.100 (Official Build) (64-bit)) I've tested it in Safari and Firefox and both seems to behave normally.

Reproduction online

Jsfiddle here but you can't reproduce it there. Probably because its inside an iframe?

Video of the issue:

Answer 1

Well I looked for similar problems and solutions, after fixing your use of snap-scrolling, could be adding this:

html{
    height: 100%;
    overflow: hidden;
}
body{
    height: 100%;
    overflow: auto;
}

In some case, it apperently isn't enough, so you can also add :

body{
    overscroll-behavior: none;
}

Answer 2

You need to add overscroll behavior. This controls if you can scroll below or above content of a site. Often used for sites with 'pull to refresh'. Read more here: https://developers.google.com/web/updates/2017/11/overscroll-behavior.

scroll-snap-type: y mandatory;    
overscroll-behavior-y: none;

Answer 3

Maybe, you should try replacing:

body{
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

By this one:

#container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

I left you another example down here:

body {
  height: 100vh;
  margin: 0;  
}

.container {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

.container div {
  scroll-snap-align: start;

  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}

.container div:nth-child(1) {
  background: yellow;
  color: black;
}

.container div:nth-child(2) {
  background: red;
  color: white;
}

.container div:nth-child(3) {
  background: blue;
  color: white;
}

.container div:nth-child(4) {
  background: green;
  color: white;
}

<div class="container">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
  <div>Section 4</div>
</div>

Answer 4

Just two more line css you have to add to fix your problem. Make height to 100% to 100vh and give box-sizing:border-box; this will fix your padding property 100%width and height; box-sizing:border-box;. Why I use vh A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height and this will give you more responsive things. But if you want use 100% this will also work fine with box-sizing:border-box;

 html,body,#container, .section, .slide{
        height: 100vh;
        box-sizing:border-box;
 }

Here is your solution code

html,body,#container, .section, .slide{
            height: 100%;
            box-sizing:border-box;
     }