0

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!

Drew Baker
  • 14,154
  • 15
  • 58
  • 97
  • Where is the minimal code example we can see & examine? – vsync Jan 17 '23 at 15:41
  • @vsync sorry I had to remove it because it was actually password protected... I will work on a code snippet example so people can see what the problem was. – Drew Baker Jan 17 '23 at 15:42

1 Answers1

0

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.

Drew Baker
  • 14,154
  • 15
  • 58
  • 97