New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make `touch*` event handlers explicitly `passive: false` in renderer #1702

Closed
maxkfranz opened this Issue Jan 31, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@maxkfranz
Member

maxkfranz commented Jan 31, 2017

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

@maxkfranz maxkfranz added this to the 2.7.15 milestone Jan 31, 2017

@maxkfranz maxkfranz changed the title from Make `touch*` event handlers active in renderer to Make `touch*` event handlers explicitly `passive: false` in renderer Feb 1, 2017

@dtapuska

This comment has been minimized.

Show comment
Hide comment
@dtapuska

dtapuska Feb 1, 2017

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

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 commented Feb 1, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@dtapuska

dtapuska Feb 1, 2017

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

dtapuska commented Feb 1, 2017

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 added a commit that referenced this issue Feb 1, 2017

Make `touch*` event handlers explicitly `passive: false` in renderer #…
…1702

- Test for passive event / options object for `addEventListener()` support
- Supported browsers have all options set explicitly in the object
- Unsupported browsers just use the `useCapture` boolean

maxkfranz added a commit that referenced this issue Feb 1, 2017

Make `touch*` event handlers explicitly `passive: false` in renderer #…
…1702

- Test for passive event / options object for `addEventListener()` support
- Supported browsers have all options set explicitly in the object
- Unsupported browsers just use the `useCapture` boolean

maxkfranz added a commit that referenced this issue Feb 1, 2017

Make `touch*` event handlers explicitly `passive: false` in renderer #…
…1702

- Test for passive event / options object for `addEventListener()` support
- Supported browsers have all options set explicitly in the object
- Unsupported browsers just use the `useCapture` boolean
@maxkfranz

This comment has been minimized.

Show comment
Hide comment
@maxkfranz

maxkfranz Feb 1, 2017

Member

Thanks for your response!

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

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.

Member

maxkfranz commented Feb 1, 2017

Thanks for your response!

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment