Chrome Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event...

[gnz00]

Warning message:

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

Offending code:

konva/src/Stage.js

Lines 59 to 67 in c851b19

	function addEvent(ctx, eventName) {
	ctx.content.addEventListener(
	eventName,
	function(evt) {
	ctx[UNDERSCORE + eventName](evt);
	},
	false
	);
	}

Summary of passive event listeners: https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responsive

[SandMoshi]

I'm also seeing this and it does seem to affect the usability. Dragging around elements is laggy.

[couturecraigj]

I am seeing this as well and it is actually causing the canvas not to be rendered with position: absolute in react-konva.

[couturecraigj]

This appears to result in a bug because of this particular outcome of it not even rendering.

[blueberryfan]

I'm not sure if my Chrome browser just got updated, but I'm now on version 73.0.3683.103 and I'm suddenly getting these warnings too, originating in both Stage.js and ol.js.

"[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952"
Stage.js:36

"[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952"
ol.js:35

They both repeat three times, warning about 'touchstart', 'mousewheel', 'touchmove' and 'wheel' events.

I also found this, which seems similar: dimsemenov/PhotoSwipe#1478

konva 3.2.3
react-konva 16.8.5

[blairbodnar]

I'm also seeing the same warnings as @blueberryfan with

• Chrome: 73.0.3683.86
• konva: 3.2.4
• react-konva: 16.8.6

[mournguard]

Still a thing on the latest versions of everything :

• Chrome: 75.0.3770.142
• konva: 3.4.1
• react-konva: 16.8.7-3

[lavrton]

At the current moment, I don't see any possible ways to use passive event listeners. Konva has a core concept of drag&drop. When a user is dragging a shape it is expected that the scroll is blocked (so instead of scrolling the page, we will move a shape). So we have to use evt.preventDefault() function.

We can't use that function in passive events (that is the main idea of passive events - they don't block scrolling).

So, for now, we can only ignore that warning.

[marcofugaro]

Sure, but is there a way to use passive: true?

For instance, I have a canvas which is on a scrolling page on mobile, and I just use click events inside the canvas (not the dragging).

When I start scrolling from the canvas the page doesn't scroll. I want it to scroll.

Is there any other way to enable this other than disabling the touch events altogether with listening={false}?

(Also I'm using react-konva)

[lavrton]

The solution is to use preventDefault={false} for every shape you have.
Currently, you can not set it just on stage.

[suterma]

I would like to disagree with the last comment by @lavrton. To get rid of the warning, the code should decide and specify whether the attached event handler will issue a call to preventDefault() or not. Both may be valid use cases.

• Calling preventDefault() will prevent page scrolling (which might be useful, in case something else should happen)
• Not calling preventDefault() will allow the page scrolling to take place.

To optimize scrolling performance, passive event listeners can be declared with an option. Currently, the declaration is missing, and a warning is displayed in recent Google Chrome browsers. To get rid of the warning, the appropriate value for the option should be chosen when the event listener is added.

Example (from https://github.com/slipmatio/control-knob/blob/main/src/ControlKnob.vue#L278)

element.addEventListener('wheel', wheelListener, { passive: true /*or false, depending on requirements*/ })

Note: I have raised this issue downstream in peaks.js, but by the suggestion of @chrisn, I am raising it here directly.

[lavrton]

Wow, I didn't know passing an option will remove the warning. Who can make a Pull Request to fix that? Just need to add { passive: false} in stage listener.

[lavrton]

@suterma thanks for the information.

[CountingBeeps]

I can second the large amount of lag. It can take up to a second for the dragging to update. It currently makes my project unusable.

Edit: Ok it seems I only get the lag some of the time? It seems random.

[lavrton]

@GameDungeon make a small demo. It should not be related to the passive listeners. Probably you just need to optimize performance.