Slick: Console warnings for non-passive scroll event handlers

[bunkscene]

There is an issue with Chrome showing warnings for all slick components. It is related to non-passive scroll event listeners.

To reproduce, just load the demo page and see the many warnings like this:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

For more info, see this: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

[leggomuhgreggo]

@bunkscene thanks man. One concern is that we do call preventDefault in some instances. I'd want to be sure places where we declare passive aren't using preventDefault at all

[hernimen]

same issue here! any updates?

[Nick-Fiasco]

Just like to weigh in and say that I have been noticing this same log in the console for quite some months. But only just had time to delve into it and find that it is linked to Slick.

Thanks for investigating!

[jezmck]

I'm using vue-slick in a cordova hybrid app, and the performance is a bit sketchy - I'm hoping that resolving this issue may improve matters.

[jezmck]

As far as I can see, it's only at the top of Slick.prototype.changeSlide():
https://github.com/kenwheeler/slick/blob/ee7d37faeb92c4619ffeefeba2cc4c733f39b1b3/slick/slick.js#L683-L692
and at the end of Slick.prototype.cleanUpEvents():
https://github.com/kenwheeler/slick/blob/ee7d37faeb92c4619ffeefeba2cc4c733f39b1b3/slick/slick.js#L805

[ghost]

This seems to still be happening, any updates?

[addedlovely]

This is also coming up in Google Lighthouse audits.

[nicolaskopp]

It's a bit more than @jezmck mentioned. I opened a PR with a solution:

https://github.com/kenwheeler/slick/pull/3422

[jeandcr]

I would love to hear updates on this matter.

It would seem that the this could be fixed by using Passive Event Listeners but would create some compatibility issues, most noteworthy IE11.

[nicolaskopp]

@jeandcr see my PR https://github.com/kenwheeler/slick/pull/3422 which solves the issue using Passive Event Listeners. Unfortunately Slick slider seems to stop working in some mobile browsers.

[Anikethana]

any updates on this ?

[ishyfishyy]

+1

We're also facing the same violations, it'd be great if this could be resolved in a next version, because our client doesn't like these violations.

Thanks in advance.

[nwallis]

I am also concerned from a vue.js point of view with Google SEO when using Slick inside a Vue component. I have already taken the gamble that Google will render my javascript components, but I wonder how a violation like this would make them abort rendering the page at all.

[saikrishna-munjala]

same issue, how can i fix this,

[ranielpogi]

any updates on this thank's

[carlosbvz]

2019 and got the same problem :(

[anteksiler]

It would be nice to get an update for this. Here is a nice pull request for Headroom JS on how to fix this: https://github.com/WickyNilliams/headroom.js/pull/288/commits/d9d71bcdc8f39a28d1fb13853a4fdb3080245a0a

[sowinski]

Please fix this :)

[Kocal]

You are free to send a PR if you need this to be fixed as quickly as possible.

[jezzdk]

You are free to send a PR if you need this to be fixed as quickly as possible.

There is already a PR from 2 years ago: https://github.com/kenwheeler/slick/pull/3422

[jezmck]

Alternatively, fork the project and merge the PR.

[nicolaskopp]

I fixed this (hopefully) in #3422 and made a fork with install instructions:

https://github.com/nicolaskopp/slick