mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

passive event handler #98

Open CommanderRaiker opened 1 year ago

CommanderRaiker commented 1 year ago

Hello,

can you update your lib to prevent the following verbose message in edge browser?

coloris.min.js:6 [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

I'm not deep enough into the topic, but I was able to eliminate the message with the following change:

e.addEventListener(t, l)

becomes:

e.addEventListener(t, l, { passive: true})

mdbassit commented 1 year ago

I'm unable to reproduce this on the latest version of Microsoft Edge with the latest version of Coloris. What versions were you testing?

In any case, some non-passive touch events are necessary to make the color picker work on mobile devices.

CommanderRaiker commented 1 year ago

Hello. I got the message at Edge Version 112.0.1722.64

mdbassit commented 1 year ago

Again, I am unable to reproduce this warning on Edge version 112.0.1722.68 with the latest version of Coloris. Could you describe the steps to reproduce the issue?

mdbassit commented 1 year ago

Any update on this?

CommanderRaiker commented 1 year ago

Hello,

 

I checked it again and I noticed that the violation error doesn't occur every time.

I got the error like in the attached screenshot and after 2 site refreshs it doesn't occur again.

 

greetings

   

Gesendet: Freitag, 12. Mai 2023 um 12:55 Uhr Von: "Momo Bassit" @.> An: "mdbassit/Coloris" @.> Cc: "Raik" @.>, "Author" @.> Betreff: Re: [mdbassit/Coloris] passive event handler (Issue #98)

 

Any update on this?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

mdbassit commented 1 year ago

Could you put a link to the page where this warning occurs?

mdbassit commented 1 year ago

I'm closing this for inactivity.

laygir commented 1 year ago

fwiw, just wanted to post this here. I also read your comment here and on another issue, saying that scroll blocking is necessary, so not posting to complain but to show the warning does come up in the examples site. 🙌

Screenshot 2023-06-04 at 18 10 35
mdbassit commented 1 year ago

fwiw, just wanted to post this here. I also read your comment here and on another issue, saying that scroll blocking is necessary, so not posting to complain but to show the warning does come up in the examples site. 🙌

Thank you for reporting this. This is proving hard to solve as I'm still unable to reproduce this on several machines. Could you provide your operating system and browser version? Also is there a specific set of conditions that trigger this warning or does it always happen for you?

laygir commented 1 year ago

Hey @mdbassit 👋

Of course, attached a screen recording. I am using Chrome 113.0.5672.126 (Official Build) (arm64) with MacBook M1 Pro on Ventura 13.4. It does happen consistently every time for me.

But I just checked it with a friend who has a company managed laptop with Chrome v114.x.x there I did not see the warning. So it could also be his chrome://flags configured to prevent such warnings since it's managed by a company admin..

Hope this helps 🙌

https://github.com/mdbassit/Coloris/assets/772730/756dccc2-a67b-44bb-aea0-655f63f12c66

mdbassit commented 1 year ago

That helps a lot. Thank you so much. I will investigate this further.