Consider removing scroll snap on the front page

[DukeManh]

I wanted to file this issue for a while now. In #2080, I introduced scroll-snap-like behavior on the landing page as suggested by #2042.
However, due to Telescope's layout, we couldn't use CSS scroll snap to do that but rather had a hacky solution by using an IntersectionObserver and promised to improve it.
I had been having trouble triggering scroll-snap behavior consistently. Plus it causes unexpected scrolls on mobile sometimes too.
I don't think scroll snap works for us and there's not a good way to simulate that feature.

There's a good article on why not to use this too.
https://alvarotrigo.com/blog/why-not-to-use-css-scroll-snap/

[manekenpix]

@DukeManh I like this idea, but we should get more opinions. I'm going to convert this into a discussion here (good opportunity to see how that feature works).

[cindyorangis]

Down with scroll snapping! I hate it so much on Instagram but it's honestly not too bad on Telescope (mobile) because it's just the banner to the first post. I don't see scroll snapping on desktop. Is this a mobile-only feature?

[manekenpix]

I don't see scroll snapping on desktop. Is this a mobile-only feature?

I see it on both desktop and Telescope PWA

[cindyorangis]

Really? I've never seen it on desktop. I just tried on both Firefox and Chrome... Maybe my laptop has the "don't make me dizzy feature" on

[HyperTHD]

I haven't messed around with scroll-snap on mobile, but on desktop, I can certainly see the flaws and disadvantages it's been giving us lately.

I'd personally prefer to have it removed if possible, at least on Desktop. It's not something I enjoy using alot for reasons the article you provided show. Not a bad feature, but at least with telescope's design atm, probably not the best thing to have.

[DukeManh]

I'm not sure if we should keep it or not. Some people might like it but I have some problems using it.

So CSS has support for scroll-snapping but it doesn't work very well for content larger than the viewport. https://alvarotrigo.com/blog/why-not-to-use-css-scroll-snap/. So I have an IntersectionObserverer that observes the visibility of the Banner and then make a call to scrollToViewPort to scroll to the next section.

@cindyledev, It's not triggered consistently on the desktop because your manual scroll mostly overrides the scroll byscrollToViewPort function. It only works when you do a swipe(using touchpad) or one one scroll(using mouse)(Problem 1)

On mobile, I have this problem where If I keep my finger on the screen while scrolling, I have this funny behavior:(problem2)

RPReplay_Final1635985978.MP4

[cindyorangis]

Wow @DukeManh that's a terrible experience. Thanks for sharing.

[menghif]

Scroll snap doesn't work for me on Chrome/Edge 95 but it still works on Firefox 94.
Also it's very laggy on mobile safari when low power mode is on:

RPReplay_Final1636036151.MP4

That's on iphone 11 so I'm sure on older iphones it's not good either.

[cindyorangis]

This is what I experience on my Samsung Galaxy S9

[humphd]

I would remove it. I think it was an interesting experiment, but leads to some very challenging UX bugs to fix.