[Chrome] Unable to preventDefault inside passive event listener due to target being treated as passive.

[justmedanny]

I get this error in Chrome Console and a the same error will continuously generate as I scroll:

nicescroll.js:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

[louisiscoding]

Same

[serkanhursgunel]

same

[fgafarshad]

Same. Also, in addition to displaying the error, the page scroll mode has unwanted jumps. for example see this page: https://www.hamyarit.com/

[helen-flynn]

Same

[anandaitwadekar]

I also discovered same issue, Hope it should be solved soon.

[altairbow]

Same issue

[vikyd]

not a solution.

But you can download previous Chrome versions to test this problem.

• All OS: https://storage.googleapis.com/chromium-browser-snapshots/index.html
• Win 64: https://storage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/
• Or: http://crportable.sourceforge.net/releases.html

[Tolc]

Fixed it!

As stated by Google, they've changed the behavior of passive event listeners only for window, document or body elements.

The fix is simply to force the listeners to be active for those elements. So replacing this https://github.com/inuyaksa/jquery.nicescroll/blob/347d35e29404904c84ca5ae720a962f290b8d564/jquery.nicescroll.js#L2555 with this https://github.com/Tolc/jquery.nicescroll/blob/6876279cb895bc6ad892c71f8a327dce85e18e9b/jquery.nicescroll.js#L2555 (passiveSupported && (active || el == window.document || el == window.document.body || el == window)) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);

I've created a pull request #802

[Tolc]

Paging @inuyaksa because this is breaking on Chrome...

[Fq2112]

@Tolc u save ma lyf dude, bunch of thx 👍

[serkanhursgunel]

Fixed it!

As stated by Google, they've changed the behavior of passive event listeners only for window, document or body elements.

The fix is simply to force the listeners to be active for those elements. So replacing this jquery.nicescroll/jquery.nicescroll.js

Line 2555 in 347d35e

(passiveSupported && active) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);

with this https://github.com/Tolc/jquery.nicescroll/blob/6876279cb895bc6ad892c71f8a327dce85e18e9b/jquery.nicescroll.js#L2555 (passiveSupported && (active || el == window.document || el == window.document.body || el == window)) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);

I've created a pull request #802

İt Worked. Thanx..

[Owen2008]

@Tolc I have repalced Line 2555 in 347d35e,İt Worked. The new problem is that the scroll bar is stuck and cannot be pulled to the bottom.Unless the page is reset.

[Tolc]

@Owen2008 seems like it is an unrelated issue.

[rajukaushik94]

Am facing same issue. Please suggest me appropriate solution for this error. I have bridge wordpress theme. i had already check but in my theme there is no nicescroll.js file.

[roniahmadi]

same

[rljdavies]

The fix works but if you want the fix for the minified file then find the following...

}), Y && i ? e.addEventListener(o, t, {

Or pretty print the min.js and goto line 1082, and replace with the following....

}), Y && (i || e == l || e == l.body || e == a) ? e.addEventListener(o, t, {

Hope this is helpful. Rich

[Alecto]

Fixed it!

As stated by Google, they've changed the behavior of passive event listeners only for window, document or body elements.

The fix is simply to force the listeners to be active for those elements. So replacing this https://github.com/inuyaksa/jquery.nicescroll/blob/347d35e29404904c84ca5ae720a962f290b8d564/jquery.nicescroll.js#L2555

with this https://github.com/Tolc/jquery.nicescroll/blob/6876279cb895bc6ad892c71f8a327dce85e18e9b/jquery.nicescroll.js#L2555 (passiveSupported && (active || el == window.document || el == window.document.body || el == window)) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);

I've created a pull request #802

thanks! works fine

[gyao96]

A simple fix: document.addEventListener('touchstart', function(){}, {passive: false}) The third parameter of addEventListener is the configuration parameters

{
    capture: Boolean,  // listener will be triggered when event propagates to this event target in its capture phase
    once: Boolean, // whether or not you wish to call the handler only once
    passive: Boolean  // whether this listener will never call `preventDefault`
}

[hiraanwer95]

A simple fix: document.addEventListener('touchstart', function(){}, {passive: false}) The third parameter of addEventListener is the configuration parameters

{
    capture: Boolean,  // listener will be triggered when event propagates to this event target in its capture phase
    once: Boolean, // whether or not you wish to call the handler only once
    passive: Boolean  // whether this listener will never call `preventDefault`
}

it solved my problem. (Y)

[MehdiKhoshnevisz]

same

[ghost]

Just Add below CSS. it will solve your issue. :)

.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; } or .owl-carousel { -ms-touch-action: none; touch-action: none; }

[DiegoArayaLobos]

Just Add below CSS. it will solve your issue. :)

.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; } or .owl-carousel { -ms-touch-action: none; touch-action: none; }

I needed it, thanks!

[jabbarn]

the second styling worked for me! Thanks!

[vitordm]

The fix works but if you want the fix for the minified file then find the following...

}), Y && i ? e.addEventListener(o, t, {

Or pretty print the min.js and goto line 1082, and replace with the following....

}), Y && (i || e == l || e == l.body || e == a) ? e.addEventListener(o, t, {

Hope this is helpful. Rich

It works for me! Thanks

[karimlo]

I am having the same error message but with a different JS file.

smoothPageScroll.min.js?ver=5.2.3:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312 wheel @ smoothPageScroll.min.js?ver=5.2.3:1 smoothPageScroll.min.js.zip

[eversonv]

Fixed it!

As stated by Google, they've changed the behavior of passive event listeners only for window, document or body elements.

The fix is simply to force the listeners to be active for those elements. So replacing this https://github.com/inuyaksa/jquery.nicescroll/blob/347d35e29404904c84ca5ae720a962f290b8d564/jquery.nicescroll.js#L2555

with this https://github.com/Tolc/jquery.nicescroll/blob/6876279cb895bc6ad892c71f8a327dce85e18e9b/jquery.nicescroll.js#L2555 (passiveSupported && (active || el == window.document || el == window.document.body || el == window)) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);

I've created a pull request #802

Thanks man!! Great!

[walterwing]

Just Add below CSS. it will solve your issue. :)

.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; } or .owl-carousel { -ms-touch-action: none; touch-action: none; }

Both worked. Thanks!

[Chetan-Goyal]

Thanks a lot @Tolc ... Smooth Scroll is working fine now.. :)

[saurabh5986]

Just Add below CSS. it will solve your issue. :)

.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; } or .owl-carousel { -ms-touch-action: none; touch-action: none; }

Worked for me

[nntadotzip]

Thanks a lot @Tolc ... Smooth Scroll is working fine now.. :)

@Chetan-Goyal How do you fix it with Smooth-scroll? As there's no passiveSupported inside the code? Or we just simply input the variable? I use Smooth Scroll version 1.2.1