Skip to content
This repository has been archived by the owner on Feb 24, 2023. It is now read-only.

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

Open
cimpok opened this issue Jun 24, 2020 · 3 comments
Labels

Comments

@cimpok
Copy link

cimpok commented Jun 24, 2020

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

@cimpok cimpok added the bug label Jun 24, 2020
@issue-label-bot
Copy link

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
Copy link

basaran commented Jul 27, 2020

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
Copy link
Author

cimpok commented May 8, 2022

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants