Swiping through the carousel causes its parent to vertically scroll

benchesh commented 2 years ago

This issue is a little tricky describe but when you see it, you can't "unsee" it!

Using the carousel on a real mobile device (I'm using an iPhone 12) is like trying to handle soap. The scrolling is very slippery & unforgiving. If your finger moves across the screen at a very slight diagonal, the entire page will scroll at the same time instead of staying fixed. It's extremely easy to trigger accidentally unless you're very meticulous to swipe completely horizontally.

See this CodeSandBox (demo link here). The only thing I've done is add placeholder text above & below the carousel to more easily demonstrate the problem.

Compare with say, the carousels in this page and you'll see you can be significantly more carefree in how you navigate through them. As a result, the experience feels more polished and natural.

Has anyone found a workaround for this?

harshaLekharaju commented 2 years ago

Hi, have you found the resolution for this? Found this issue recently on our website and was unable to find a proper resolution. This issue is happening in iOS browser for us

gabelew commented 2 years ago

Same issue here on iOS Safari. What is confusing is it doesn't happen on the react-slick.neostack demo page, but occurs for the code sandbox linked on the github page. I am not successful in pinpointing what makes the neostack demo different.

harshaLekharaju commented 2 years ago

@gabelew Used the hack/solution of xavi-tristancho in https://github.com/akiran/react-slick/issues/1240. It resolved the issue for me

yurenmoodley commented 1 year ago

Hi, is anyone looking into this issue?

akiran / react-slick

Swiping through the carousel causes its parent to vertically scroll #2130