search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
930 stars 128 forks source link

[Violation] Warning: Added non-passive event listener #231

Closed Psycarlo closed 1 year ago

Psycarlo commented 1 year ago

Getting this warning:

[Violation] Added non-passive event listener to a scroll-blocking <algum> evento. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Versions: "vue": "^3.2.16" "vue-advanced-cropper": "^2.8.8" "vite": "^4.0.1"

Psycarlo commented 1 year ago

What if we changed events from passive: false to passive: true? @Norserium

Norserium commented 1 year ago

@Psycarlo, thank you for your notice. I need to investigate this aspect. I will try to do it on weekends.

Psycarlo commented 1 year ago

Nice! Let me know if you want to make the change. If so, I can create the PR

Norserium commented 1 year ago

@Psycarlo, how to reproduce the appearing of this warning?

Psycarlo commented 1 year ago

@Norserium

Create a new vue app: npm init vue@latest Install vue-advanced-cropper v2.8.8

Add Cropper <Cropper ref="cropper" src="https://images.unsplash.com/photo-1516007445015-fc20d86f8468?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" :stencil-component="RectangleStencil" />

Run dev server

Open console [Violation] Added non-passive event listener to a scroll-blocking <algum> evento. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Norserium commented 1 year ago

@Psycarlo , thank you, I reproduced the appearing of this warning.

But there is the reason, why this event listeners are marked as not passive. They should be prevented. The most clear example is the preventing of the mobile pinch gesture to implement the image zoom, otherwise they will conflict.

Of course, I can use touch-action: none, but its support is limited.

Any ideas? Did you see any solid cropper that uses passive events?

Psycarlo commented 1 year ago

I did not. Maybe could we have an option to turn on/off touch-action?

Or I will just keep living my life looking at the warning 😄 -- and that is fine

Norserium commented 1 year ago

@Psycarlo, try to open Google Maps and look in the console window. I assume it's the common practice and it's okay.