Swiper: 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