Chrome scroll snap glitches

Question

I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...

{{redacted URL}}

I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:

1. Scrolling from first red section into blue I see a flash
2. Scrolling from first red section into blue, often times it will almost get to blue, but then glitch back to red.
3. You can actually scroll UP past the top of the page

Works great on Firefox and even Safari (OMG).

All the issues seem to be related to going from first slide to the second.

I have noticed that the length of the scroll-handle seems to change when going from section 1 to 2, I have no idea why but perhaps that is related?

Any tips or help would be most welcomed!

Answer 1

Yes, changing the height during scroll may causes some issues on Chrome. This could happens for example when we use parallax effects.

The explanation : the text may be lower than its "normal" area container.

To fix that : I use the css property contain and I set it to 'layout'

I use this instead of using a overflow hidden because with overflow hidden I can't have my parallax effects :)

Maybe it could help someone.

Answer 2

OK looking into this now, I see that it was because I had an element (footer) at the bottom of the page that was toggling to display:none. Not sure why this should effect scroll snap, but I suppose it's because it is changing the length of the scrollbar and Chrome didn't like that.

This doesn't stop the scroll up issue (#3), but it does seems to solve all the visual glitches.

So for all future people: When using scroll-snap, make sure you aren't doing anything that might change the height of the page during scroll, Chrome doesn't like that. 100vh on mobile was another culprit of this.