[Violation] Added non-passive event... and [Intervention] Unable to preventDefault inside passive event listener...

[cimpok]

Hello, this might be a bug,
I don't remember to see this before, some days ago I started to see the following warnings in my Chrome console view of a page containing a vue-agile component. In Chrome this is shown both in desktop view and phone view:
[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
There are four warnings, for touchstart , touchmove, touchstart, touchmove

But in the Chromium based new Edge I see no error until I switch to Phone view and swipe the slide left or right. I see the following warning, (or is this 'Intervention' thing OK to live with ?) There is an identical warning in Firefox.
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

This may be related to this: https://developers.google.com/web/updates/2017/01/scrolling-intervention

I found a possible workaround. When I added the following to my styles the Interventions went away, but not the Violation in Chrome.
.agile-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.84. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[basaran]

Hello, it seems the addEventListener has a new property object that can be passed. Following patch to Agile.vue clears the errors.

mounted () {
	// Windows resize listener
	window.addEventListener('resize', this.getWidth)

	// Mouse and touch events
	this.$refs.track.addEventListener('touchstart', this.handleMouseDown,  {passive: true}) // passive
	this.$refs.track.addEventListener('touchend', this.handleMouseUp)
	this.$refs.track.addEventListener('touchmove', this.handleMouseMove,  {passive: true})  // passive
	this.$refs.track.addEventListener('mousedown', this.handleMouseDown)
	this.$refs.track.addEventListener('mouseup', this.handleMouseUp)
	this.$refs.track.addEventListener('mousemove', this.handleMouseMove)

	// Init
	this.isSSR = false
	this.reload()
},

beforeDestroy () {
	window.removeEventListener('resize', this.getWidth)

	this.$refs.track.removeEventListener('touchstart', this.handleMouseDown,  {passive: true})  // passive
	this.$refs.track.removeEventListener('touchend', this.handleMouseUp)
	this.$refs.track.removeEventListener('touchmove', this.handleMouseMove,  {passive: true})  // passive
	this.$refs.track.removeEventListener('mousedown', this.handleMouseDown)
	this.$refs.track.removeEventListener('mouseup', this.handleMouseUp)
	this.$refs.track.removeEventListener('mousemove', this.handleMouseMove)
	this.disableAutoPlay()
},

[cimpok]

Hi Lukasz,

I found this article Easy fix for: Unable to preventDefault inside passive event listener due to target being treated as passive
I think it is exactly about our problem here, it offers two fixes, the second fix is the same as @basaran 's solution to mark the event listeners as active, there is however the first option is the more encouraged solution, it just removes the event.preventDefault() instruction in the passive listeners.

Can you please have a look at this article. it could be as easy as removing these lines from your component.