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

[mihai-craita]

Hi there!

In your example "SVG Inserted with Embed Element" if you switch to console in development tools of chrome (version 73 or newer) you will receive the following error in console:

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

Expected behaviour

this error should not appear in console

Configuration

• svg-pan-zoom version: v3.6.0
• Browser(s): google chrome 79.0
• Operating system(s): OSX
• A relevant example URL: http://ariutta.github.io/svg-pan-zoom/demo/embed.html

[jvaa]

This causes also a bug when you have scrollbars for the page: on svg when you wheel scroll, page scrolls and also svg is zoomed. Affects only Chrome on all platforms as far as I know.

@ariutta would you be able to fix this?

[webyahoo]

I also encountered the same issue. Tested on Chrome browser. Can we have this fixed ?

Chrome Debug log:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
svg-pan-zoom.min.js:3 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

[webyahoo]

I found this thread on another github project that provided a solution to a similar issue, hopefully it helps this project as well.
inuyaksa/jquery.nicescroll#799

[aloska]

Still not fixed?

[CrzLvl]

Replace lines 1580 and 1592 of the unminified code:

1580. elem[ _addEventListener ]( prefix + eventName, cb, useCapture || false );
1592. elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || false );

...with:

elem[ _addEventListener ]( prefix + eventName, cb, useCapture || { capture: false, passive: false } );
elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || { capture: false, passive: false } );

This solution was adapted from here, which offers an explanation as to what this does and why it works. I haven't thoroughly tested it but it seems to resolve the console errors and allows the SVG to be zoomed without scrolling the page.

[CodeKazuko]

How about for the minified code?

[sakurawald]

My google chrome is Version 96.0.4664.110 (Official Build) (64-bit)
This works for me ! But the passiveOption logic is right. The real reason is that we should specify the passiveOption to passive param, not the wront param capture. since the passive param is default true !
i just think this is a problem because a newer chorme version add the additional capture param.
so the old svg-pen-zoom code pass the logic correct passiveOption variable to the wrong parameter !

    // elem[_addEventListener](prefix + eventName, cb, isPassiveListener ? passiveOption : false);
    elem[_addEventListener](prefix + eventName, cb, { capture: false, passive: isPassiveListener ? passiveOption : false });

    // elem[_removeEventListener](prefix + eventName, cb, isPassiveListener ? passiveOption : false);
    elem[_removeEventListener](prefix + eventName, cb, { capture: false, passive: isPassiveListener ? passiveOption : false });

[connerkennedy32]

I'm still seeing this issue. Any update?

[connerkennedy32]

Replace lines 1580 and 1592 of the unminified code:

1580. elem[ _addEventListener ]( prefix + eventName, cb, useCapture || false ); 1592. elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || false );

...with:

elem[ _addEventListener ]( prefix + eventName, cb, useCapture || { capture: false, passive: false } ); elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || { capture: false, passive: false } );

This solution was adapted from here, which offers an explanation as to what this does and why it works. I haven't thoroughly tested it but it seems to resolve the console errors and allows the SVG to be zoomed without scrolling the page.

I'm running version 3.12.1. Where do I add this code in this version? I'm having a hard time tracking it down