vue-slick-carousel icon indicating copy to clipboard operation
vue-slick-carousel copied to clipboard

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

Open bastienrossi opened this issue 4 years ago • 7 comments

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).

bastienrossi avatar Nov 27 '20 15:11 bastienrossi

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 avatar Jan 11 '22 11:01 meciasbueno

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?

meciasbueno avatar Jan 11 '22 11:01 meciasbueno

@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",

bastienrossi avatar Jan 12 '22 08:01 bastienrossi

@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??

meciasbueno avatar Jan 12 '22 14:01 meciasbueno

@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

bastienrossi avatar Jan 12 '22 15:01 bastienrossi

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

meciasbueno avatar Jan 12 '22 16:01 meciasbueno

Hasn't this been merged yet? :(

EduardoMateos avatar Sep 02 '22 12:09 EduardoMateos