Add support for 'Passive event listeners' to improve page scroll performance

[evolve2k]

Implementing a horizontal swipe using touch events with this library started producing this warning in our console:

Main.elm:8830 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Further research brought us to this explanation on caniuse:

Event listeners created with the passive: true option cannot cancel (preventDefault()) the events they receive. Primarily intended to be used with touch events and wheel events. Since they cannot prevent scrolls, passive event listeners allow the browser to perform optimizations that result in smoother scrolling.

ref: https://caniuse.com/#feat=passive-event-listener

Our use case is that of having a scrollable list of items on a mobile device and that each item is the full width of the screen and is swipable. Here's an example (in JS) for illustration: http://jsfiddle.net/evolve2k/afkdtjh9/14/

We're interested in how we can utilise passive event listeners with this library. Can you see a way of doing this?

[mpizenberg]

Oh I didn't know such issues could trigger runtime errors (is this an error or warning?). I've always used this library for "drawing" kind of events and so always needed to prevent mobile browser passive events handling like scrolling and such (which would mess with the drawing action).

I'll look into it more when I have a bit of time (might not be in the next two weeks). Thanks a lot for the report!

Meanwhile, I believe elm 0.19 automatically make events passive when we are not using preventDefault. Could you try using onWithOptions and setting the options to False. It might solve your issue if preventDefault is not needed.

[evolve2k]

Oh I didn't know such issues could trigger runtime errors (is this an error or warning?).

Ah yes it's only a warning. I'll update my post above.

I've always used this library for "drawing" kind of events and so always needed to prevent mobile browser passive events handling like scrolling and such (which would mess with the drawing action). I'll look into it more when I have a bit of time (might not be in the next two weeks). Thanks a lot for the report!

Thank you!!

Meanwhile, I believe elm 0.19 automatically make events passive when we are not using preventDefault.

Interesting. Currently we're on 0.18, keen to upgrade soon though.

Could you try using onWithOptions and setting the options to False. It might solve your issue if preventDefault is not needed.

Cheers. We'll have a look and try with 2.0.1 as we're on 0.18

[mpizenberg]

Hi, I'm doing a little round of the open issues. I don't have enough time these days to try to maintain a 0.18 version. Did you, by any chance, try to update your gestures code to 0.19? Is it also producing this warning?