Open cimpok opened 4 years ago
Issue-Label Bot is automatically applying the label bug
to this issue, with a confidence of 0.84. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!
Links: app homepage, dashboard and code for this bot.
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()
},
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.
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; }