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:

I made a pen with an referencing your website, still can't reproduce the problem. But you should be able to do the Iframe thing in a fiddle too, I think. — Salix, Jul 01 '19 at 14:33
Also, I noticed your fiddle doesn't have the same code as the website. The 'scroll-snap-type: mandatory;' part needs to be in the container, so here in '.snaps' and the 'scroll-snap-align: start;' part n the child of that container, so here, in '.sections'. Don't know it that's would fix t tho, because I wasn't able to reproduce the bug to test. When referencing your website in an it doesn't do what you're showin. — Salix, Jul 01 '19 at 14:33
@Salix, as I said, I do not think we can reproduce the issue within an iframe. But can you reproduce it on my site's link? And yeah, they do not have exactly the same code because in jsfiddle I couldn't add a class to the `` element without using JS. So I adapted it. — Alvaro, Jul 01 '19 at 14:36
And no, it's not bugging on the website. Maybe I have a different chrome tho. But thechnically, it's supposed to be supported starting at chrome 69 so, idk. — Salix, Jul 01 '19 at 14:39
@Salix, let's forget the jsfiddle and the iframe :) Don't think about them. I'm not bothered about it. I just want my link's site to work properly, without iframe. — Alvaro, Jul 01 '19 at 19:32
Nvm, missread stuff. But yeah, it's not reproduced on your website link is the thing. Tested on Mac 10.14; chrome 75 (64-bit); it doesn't keep scrolling up. — Salix, Jul 01 '19 at 20:00
"scroll-snap-align: start;" shouldn't in both .snap and .section, just in section. Doesn't seem to cause a problem on my end tho, I think it just ignores it, but it's really the only thing wrong I see, so you should fix that and check imo. Should be fixed either way. — Salix, Jul 01 '19 at 20:06

score 5 · Accepted Answer · answered Jul 01 '19 at 20:39

5

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;
}

answered Jul 01 '19 at 20:39

Salix

1,290
9
15

1

Just adding `html{ overflow:hidden}` seems to do the trick! Thanks for that! – Alvaro Jul 02 '19 at 15:48
1

I've reported it to Chrome anyways, so I hope they will deal with it in the future :) – Alvaro Jul 02 '19 at 15:49
Seem to be a iOS thing, sometimes it happens on safari apperently, but still, maybe they could do a work around or something. – Salix Jul 09 '19 at 01:45
My issue was taking place in Chrome for desktop :) – Alvaro Jul 09 '19 at 10:22
*MacOS and iOS, I meant it's a Apple problem :P – Salix Jul 09 '19 at 14:29
You mean, a Webkit / Chrome one? :) – Alvaro Jul 10 '19 at 15:03
That only happens with Apple products :P – Salix Jul 11 '19 at 15:42
Yeah but Apple is not the one building Chrome. The issue is in Chrome's side. – Alvaro Jul 12 '19 at 16:02
@Alvaro do you have a link to your report? I am dealing with the same issue. – Drew Baker Jan 17 '23 at 09:59
1

@DrewBaker sure! Here it is: https://bugs.chromium.org/p/chromium/issues/detail?id=980156#c_ts1582736594 – Alvaro Jan 26 '23 at 12:14

score 3 · Answer 2 · answered Sep 09 '19 at 16:03

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;

score 0 · Answer 3 · answered Jul 01 '19 at 22:27

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>

codeuix · Answer 4 · 2019-07-02T06:16:09.680

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;
     }

Unforunately that doesn't solve the issue. I still can reproduce my issue with those changes on [this page](https://alvarotrigo.com/snaps3.html). — Alvaro, Jul 02 '19 at 09:50

CSS scroll-snaps overflows body when reaching top

4 Answers4

Linked