[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

[LouisJS]

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

[Aadhavan]

Same Issue. Am using v1.4.4

[su-per-man]

make a change in the plugins, replace the following

(q=!1,e.stopImmediatePropagation(),e.preventDefault())

with

(q=!1,e.stopImmediatePropagation())

[PhamTienCuong]

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; }

Thank you. It is helpful.

[Joe0411975]

Tnx Kevin Yeti for this It works for me!

[cavielles]

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; }

Thanks a lot it works for me!!!

[1shaked]

i am having the same error when i am using plotly graph. i tried to add to the plotly canvas the css params but this is not seems to work. using chrom version 80

[AndyRand]

I am having the same error here: https://www.cadbury.co.uk/ Can you help me please?

[zangxiyang]

(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);

Thanks a lot. It is helpful for me.

[AhmadDalao]

Is it me or the nice scroll prevent scroll-behavior: smoothfrom working ???

scroll-behavior: smooth !important;

[AhmadFawzy]

@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.

replace this :- $("body").niceScroll(); with this :- $("#root").niceScroll(); in ur js file.

[zahidg9]

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 @ SmoothScroll.min.js?ver=1.0&time=1597145218

[icysonyk]

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,it works !

[mahmoudhaddad]

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

[thesinh20197]

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

Thank you so much, II have successfully fixed the error <3

[razonklnbd]

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

It worked, thanks.

[dopeabeam2]

i need help here I m Getting errors in these lines

c},Q=function(k,c){function h(){var d=b.win;if("zIndex"in d)return d.zIndex();for(;0<d.length&&9!=d[0].nodeType;){var c=d.css("zIndex");if(!isNaN(c)&&0!=c)return parseInt(c);d=d.parent()}return!1}function l(d,c,g){c=d.css(c);d=parseFloat(c);return isNaN(d)?(d=u[c]||0,g=3==d?g?b.win.outerHeight()-b.win.innerHeight():b.win.outerWidth()-b.win.innerWidth():1,b.isie8&&d&&(d+=1),g?d:0):d}function q(d,c,g,f){b._bind(d,c,function(b){b=b?b:window.event;var f={original:b,target:b.target||b.srcElement,type:"wheel", deltaMode:"MozMousePixelScroll"==b.type?0:1,deltaX:0,deltaZ:0,preventDefault:function(){b.preventDefault?b.preventDefault():b.returnValue=!1;return!1},stopImmediatePropagation:function(){b.stopImmediatePropagation?b.stopImmediatePropagation():b.cancelBubble=!0}};"mousewheel"==c?(f.deltaY=-0.025*b.wheelDelta,b.wheelDeltaX&&(f.deltaX=-0.025*b.wheelDeltaX)):f.deltaY=b.detail;return g.call(d,f)},f)}function t(d,c,g){var f,e;0==d.deltaMode?(f=-Math.floor(d.deltaX*(b.opt.mousescrollstep/54)),e=-Math.floor(d.deltaY*

showing chrome error in this line jquery.nicescroll.min.js:10 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

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

i can show all here please take a look into this

jquery.nicescroll.min.zip

[uzeehan]

I found the same issue for our website. I used the the following fix:

window.addEventListener('wheel', () => {passive:false}) or window.addEventListener('wheel', function() {passive:false})

Source: https://stackoverflow.com/questions/55548261/unable-to-preventdefault-inside-passive-event-listener-due-to-target-being-treat

[yigithans]

same problem

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

function b(a) {
    r || e();
    var b = a.target,
    c = n(b);
    if (!c || a.defaultPrevented || 'embed' === (f.nodeName || '').toLowerCase() || 'embed' === (b.nodeName || '').toLowerCase() && /\.pdf/i.test(b.src)) return !0;
    var b = a.wheelDeltaX || 0,
    d = a.wheelDeltaY || 0;
    b || d || (d = a.wheelDelta || 0);
    var k;
    if (k = !u.touchpadSupport) if (k = d) {
      k = Math.abs(k);
      L.push(k);
      L.shift();
      clearTimeout(C);
      k = L[0] == L[1] && L[1] == L[2];
      var m = p(L[0], 120) && p(L[1], 120) && p(L[2], 120);
      k = !(k || m)
    } else k = void 0;
    return k ? !0 : (1.2 < Math.abs(b) && (b *= u.stepSize / 120), 1.2 < Math.abs(d) && (d *= u.stepSize / 120), h(c, - b, - d), a.preventDefault(), void 0)
  }

5331 : return k ? !0 : (1.2 < Math.abs(b) && (b *= u.stepSize / 120), 1.2 < Math.abs(d) && (d *= u.stepSize / 120), h(c, - b, - d), a.preventDefault(), void 0)

how can we fix it?

[kidzen]

npm i tolc/jquery.nicescroll#master

install it from specific repository temporarily did the trick

thanks @Tolc

[denvergeeks]

Using the version here worked for me as well...

https://github.com/Tolc/jquery.nicescroll/blob/master/jquery.nicescroll.js