Leaflet: Speed improvement by using "passive" event handlers

[fbonzon]

Background: https://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html

When inspecting a simple Leaflet 1.0.1 map (from the Leaflet Quick Start Guide) on my Android 6.0 phone with USB debugging on Chrome on my desktop machine, I see repeated entries of this warning in the Console:

Handling of 'touchmove' input event was delayed for … ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

Is there any code in Leaflet that prevents a scroll to happen, and if not could we declare the touchmove event listeners (and maybe others) as passive ?

[IvanSanchez]

From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md (linked from that blog post):

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault to disable scrolling.

Fact is, Leaflet does call preventDefault whenever a touch drag happens: it needs to prevent the browser's behaviour (scrolling or zooming the whole page) in order to do stuff on the map (pan it or zoom it).

While _theoretically_ it should be possible to use some clever overflow properties in the map container to allow touch-capable browsers to pan it around, it would be very finicky and prone to misbehaviours across different browsers (and then there would be the question of how to attach that to two-finger touch gestures and prevent things like https://github.com/Leaflet/Leaflet/issues/3798 from happening).

Is there any code in Leaflet that prevents a scroll to happen

Yes, and in a few critical places: https://github.com/Leaflet/Leaflet/search?q=preventdefault

[sandstrom]

I have asked the Chrome team to consider removing the warning if passive is explicitly set.

UPDATE:
Chrome will change it so that specifying passive: false explicitly will no longer show the warning. So to hide it all that's needed is settings addEventListener('…', …, { passive: false }).

[dtapuska]

FWIW... Chrome supports pointerevents so I believe new versions of leaflet detect that and should use that code path instead of touchstart/touchmove.

[vinayakkulkarni]

Just did a Lighthouse scan:

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

[vinayakkulkarni]

https://github.com/Leaflet/Leaflet/blob/95b34edbbad10f58b6ae90e0915e614166c87a4f/src/dom/DomEvent.DoubleTap.js#L62

- obj.addEventListener(_touchstart, onTouchStart, false);
+ obj.addEventListener(_touchstart, onTouchStart, {passive: true});

Is this correct?

[laoneo]

@vinayakkulkarni perhaps you should open a pull request to get more attention. I do still have that issue with the latest version of leaflet.

[Ivan-Perez]

Is it possible to disable this behaviour (passive events)? I think it's breaking some of the functionality of my app. Just to check whether this is the cause or not.