gs-shop / vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://gs-shop.github.io/vue-slick-carousel/
Other
803 stars 186 forks source link

Fix "attempt to cancel a touchmove event with cancelable=false" #156

Open bastienrossi opened 3 years ago

bastienrossi commented 3 years ago

Hi,

When we scroll on a page on a mobile (or with chrome browser device toolbar) and at the same time we click/swipe a carousel, the browser throw a silent (not blocking) error :

ReportingObserver [intervention]: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

In order to avoid this, the only solution that I found was to check if the event is cancellable before trying to prevent it. At the same time I removed the package-lock.json because I think is obselete (replaced by yarn.lock).

meciasbueno commented 2 years ago

I'm having the same problem, do you have a forecast to accept this PR? since it's been a while, probably other people have the same problem too @kyuwoo-choi

meciasbueno commented 2 years ago

Hi,

When we scroll on a page on a mobile (or with chrome browser device toolbar) and at the same time we click/swipe a carousel, the browser throw a silent (not blocking) error :

ReportingObserver [intervention]: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

In order to avoid this, the only solution that I found was to check if the event is cancellable before trying to prevent it. At the same time I removed the package-lock.json because I think is obselete (replaced by yarn.lock).

@BastienMbz did you generate a version of the lib in npm for the fix for you to use?

bastienrossi commented 2 years ago

@meciasbueno I created a tag on my fork and in my package.json i do the following : "vue-slick-carousel": "BastienMbz/vue-slick-carousel#fix-preventdefault-not-cancelable",

meciasbueno commented 2 years ago

@meciasbueno I created a tag on my fork and in my package.json i do the following : "vue-slick-carousel": "BastienMbz/vue-slick-carousel#fix-preventdefault-not-cancelable",

I tried to put your tag and got the error below in npm install

package.json: "dependencies": { "vue-slick-carousel": "BastienMbz/vue-slick-carousel#fix-preventdefault-not-cancelable" }

error on npm install: npm ERR! npm ERR! gyp ERR! node -v v14.17.6 npm ERR! npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! npm ERR! gyp ERR! not ok npm ERR! npm ERR! Build failed with error code: 1

@BastienMbz Any idea what it could be??

bastienrossi commented 2 years ago

@meciasbueno Have you tried a conventionnal install ? (remove vue-slick-carousel before) npm remove vue-slick-carousel && npm install BastienMbz/vue-slick-carousel#fix-preventdefault-not-cancelable

meciasbueno commented 2 years ago

BastienMbz/vue-slick-carousel#fix-preventdefault-not-cancelable

It doesn't work either. gets stuck on the line below and then the same npm error appears :(

[#################.] \ reify:resize-observer-polyfill: timing reifyNode:node_modules/enquire.js Completed in 106ms

EduardoMateos commented 1 year ago

Hasn't this been merged yet? :(