Make touch* event handlers explicitly passive: false in renderer

[maxkfranz]

Chrome has broken compatibility with touch events. This means that several gestures/events supported by Cytoscape won't work properly on touch devices that use Chrome.

The current living-standard W3C spec says passive should be false by default. Chrome doesn't follow this.

Confirmed broken:

• drag gesture on node
• pan gesture
• pinch-to-zoom (zoom and pan)
• box selection (boxstart, boxend, box, boxselect)
• cxtdrag
• cxtdragover
• cxtdragout

We'll add a workaround for this breaking change that Chrome has made.

This also may affect Chrome on touch desktops, like the Surface --- the touchscreen won't work. That's not as problematic, because you can use the touchpad/mouse instead.

See

• https://bugs.chromium.org/p/chromium/issues/detail?id=639227
• https://www.chromestatus.com/features/5093566007214080
• Consider defaulting to use passive listener on window/document/document.body w3c/touch-events#74
• Touch listeners defaulting to passive WICG/interventions#18
• https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener

[dtapuska]

It appears you are binding pointer events and touch events. ie;

cytoscape.js/src/extensions/renderer/base/load-listeners.js

Line 1954 in 2816df2

r.registerBinding( r.container, 'pointerdown', function( e ){

and you are preventDefaulting the pointer events so you won't get touch events. Could this be that your pointer event code isn't setting touch-action correctly and that this is in fact broken in Microsoft Windows Phone as well?

[dtapuska]

Also you appear to be using fastclick in the documentation directory. Avoiding fastclick has been suggested for some time now. See ftlabs/fastclick#498

[maxkfranz]

Thanks for your response!

It appears you are binding pointer events and touch events. ie;

cytoscape.js/src/extensions/renderer/base/load-listeners.js

Line 1954 in 2816df2

r.registerBinding( r.container, 'pointerdown', function( e ){

and you are preventDefaulting the pointer events so you won't get touch events. Could this be that your pointer event code isn't setting touch-action correctly and that this is in fact broken in Microsoft Windows Phone as well?

That's a good guess, but pointer events don't get registered, unless the browser has no touch event support, like the Surface or Windows phone. So, pointer events do not affect this lib on Chrome. We've definitely confirmed that the Surface works on Cytoscape 2.7.

Also you appear to be using fastclick in the documentation directory. Avoiding fastclick has been suggested for some time now. See ftlabs/fastclick#498

That's a good call. Originally, the docs had some more sophisticated widgets on them and it was really nice to have them working quickly on older Android tablets or older iPads, for which Fastclick is still necessary. It could be removed from the docs pages now, though, considering mostly devs read it and the lag would only affect the run links now. #1703

However, Fastclick is a bit of a red herring for the topic at hand. It's not a dependency, and it doesn't affect Cytoscape. Cytoscape gets negatively affected by making passive: true default, Fastclick or no.

The main concern regarding Cytoscape is that the lib is used in many places, in both academia and commercial organisations, not all of which can easily update their code. Having support for passive events in Chrome is great but unfortunately, changing the default behaviour breaks our lib and many apps that depend on it.