Unable to preventDefault inside passive event listener invocation.

[AngelaRg]

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: 4.5.1 (the one ionic is using)

• Platform/Target and Browser Versions: Ionic 4, Chrome Version 77.0.3865.116 and 77.0.3865.120

• Live Link or JSFiddle/Codepen or website with isssue: App URL https://ionic-v4-zoom-test.stackblitz.io

What you did

Hi! I am currently migrating my app to ionic 4, and I followed a simple tutorial about how to use the ion-slides for their zoom functionality. So you can open the image, zoom in and swipe to move around.

Everything works fine with my ion-slides and the zooming, except when I use a swipe gesture to move around the zoomed image, I get the following error message like a thousand times during the swipe:

Unable to preventDefault inside passive event listener invocation. swiper.bundle-8d61f7c5.js:5188

onTouchMove @ swiper.bundle-8d61f7c5.js:5188 handleLiveEvent @ swiper.bundle-8d61f7c5.js:297 invokeTask @ zone-evergreen.js:391 runTask @ zone-evergreen.js:168 invokeTask @ zone-evergreen.js:465 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback @ zone-evergreen.js:1640

I guess it is not harmful, but of course it is not nice to spam the console. Could someone look into the issue?

Here is a small test app:

App URL: https://ionic-v4-zoom-test.stackblitz.io If you open it with chrome inspect, you can see in the console the error message I am talking about.

Steps to reproduce: Click Login, click Details. Then click on the image to open the zoom modal. If you zoom in and then swipe around the image, you will get the error messages in the chrome console.

Editor URL (if you want to check out the code): https://stackblitz.com/edit/ionic-v4-zoom-test

Expected Behavior

No console errors during swipe.

Actual Behavior

I'm going to quote the answer I received in the ionic forum for this, as I am not an expert in the topic.

morphist 16h Yo may have discovered a bug (also since using swipe inside zoomed in slide is like an edge case). But it is not harmful bug. Basically what happens:

• swiper implementation uses passive listeners which are meant to improve performance when it comes to scrolling etc.

• somewhere in swiper code base they call event.preventDefault() for the event generated from passive listener. Browser can’t prevent default in this situation cause the listener is passive and by definition there is no default behavior (like zoom etc).

So this should be a warning in the console rather than error.

Maybe a good idea to log this issue in swiper’s github or do a pull request?

[SimonGolms]

With the following configuration I could eliminate the error message for the moment:

sliderOpts = {
  passiveListeners: false,
};

[simonmaass]

any update on this? i am having the same issue

The above suggestion doesnt work

[Franco-Alejandro]

Any updates? Having the same issue.

[alexvais]

@SimonGolms did you find a fix for that issue?

I am having that issue on zoom in for example.

[harunme3]

slideoption={ zoom:true, passiveListeners: false, }

[Pol52]

Proposed solutions don't work for me, keep getting the same error

[simonmaass]

still having these issues...

[orlando-mm]

Test use this, inside the component.

... element with class .touch ...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[weiz18]

We are having a similar issue on our side with pointerup event as well. shouldn't we reuse the passive listener params in here so we have the option to make is non passive ? https://github.com/nolimits4web/swiper/blob/master/src/core/events/index.js#L24

[weiz18]

Any updates ? 😢

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue