Ionic 4 ion-slides swiper error

Ionic Framework
1

Hi!

I am currently migrating my app from ionic 3 to ionic 4, and since the ionic-img-viewer zoom plugin does not work with ionic 4, I found somewhere a simple tutorial about how to use the ion-slides for their zoom functionality (basically it means just having a modal with a slider of 1 slide).

I believe the tutorial was this: https://ionicacademy.com/ionic-4-image-gallery-zoom/ Though it is no longer available for everyone.

Everything works fine with my slider 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 don’t know if it is harmful but of course it is not nice to spam the console. Can anyone guide me on this or look into the issue?

2

Probably have to ask Simon, difficult to know without the code?

3

Here is a small test app I did first to understand ionic 4 and the changes, I implemented the zoom there.

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.

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

4

Hi, have you manage to reproduce it?

5

I don’t see the error messages?

I haven’t tried to run it locally.

6

Sorry, I have added the steps to reproduce in my previous post. Maybe now?

7

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?:slight_smile:

2 Likes
8

Ok, thanks! I will log it in the swiper’s github then. :slight_smile:

9