Snap scrolling making CSS animations glitchy/flashy in Chrome

I have a few students who built their websites in CodePen using the snap scrolling feature alongside CSS grid and CSS animations. We use Firefox Nightly to be able to use the latest HTML/CSS properties. However, when the webpages are run in Chrome, and you scroll to the next section, the animations glitches and flashes. This only happens when you are scrolling to a section with an animation. They don’t do this in Firefox Nightly.

Is there a way to deactivate the snap scrolling only when Chrome is used? or any other ideas rather than just remove the snap scrolling all together. I was wondering if there’s a way to have the CSS animation not start until the snap scrolling was executed. Thanks!

These are the examples: https://codepen.io/samantha-sekellick/pen/PoOgYbB
and
https://codepen.io/samantha-sekellick/pen/YzEgmmV

I don’t know of any.

Even if there was a way to disable it just for Chrome I would recommend getting rid of it completely. I personally find it very annoying that a web page is telling me I can’t scroll the way I want to and it therefore has the right to scroll to where it wants me to go. If you only want the user to be able to see one complete section at a time then use CSS to hide all but the current section and don’t rely on the vertical scroll bar at all for navigation.

This is of course my personal opinion so feel free to ignore it.

Thank you! Definitely something to consider. They are doing a website that it’s supposed to flow like a story book, so the snap scrolling was nice to make it feel like you are “passing pages” and not getting stop like you are in the middle of two pages. If they make it so it transitions nicely no matter where you stop when scrolling, then they can definitely get rid of the snap scrolling.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.