search

zooniverse / Panoptes-Front-End

Front end for zooniverse/Panoptes
https://www.zooniverse.org
Apache License 2.0
64 stars 76 forks source link

Mobile Safari: Pinch and Zoom draws lines for a drawing task #6012

Open eatyourgreens opened 3 years ago

eatyourgreens commented 3 years ago

Expected behavior

Multi-touch gestures should be ignored by the drawing code, so pinch-and-zoom should enlarge the subject image.

Current behavior

Via a volunteer on the DMZ Cranes project, who I think is contributing on an iPhone:

I already have an issue with the crane project. I always use my fingers to increase the size and magnification of a photo. Yet the option to choose an animal is already set up. This causes marks to be on the photos which then must be erased before attempting a restart. This has occurred each time and has stopped me from even starting. The plus sign does not allow for easy navigation to be certain of species 😢

Steps to replicate

https://www.zooniverse.org/projects/jocham96/dmz-crane-watch/classify

Pinch and zoom, on a touch device, and you should see a line drawn by accident.

Additional information

This should have been fixed by https://github.com/zooniverse/Panoptes-Front-End/pull/5489. When that PR was merged, mobile Safari didn't support pointer events. I think that what might be happening here is that multi-touch pointer events are triggering drawing.

eatyourgreens commented 3 years ago

React 17 fixed a bunch of bugs for code that uses addEventListener, which the PFE drawing code does. It would be worth checking out this project on iOS, on the React 17 branch, on the off-chance that the bug goes away with React 17. https://pr-5992.pfe-preview.zooniverse.org/projects/jocham96/dmz-crane-watch/classify?env=production

eatyourgreens commented 3 years ago

I’ve just checked with the latest iOS 14, and the bug still exists with React 17. 😕

We’re going to need code that detects events from multiple pointers and cancels drawing.