search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
902 stars 315 forks source link

Issues with drawing on iOS devices #91

Open ern-arrowsmith opened 4 years ago

ern-arrowsmith commented 4 years ago

I have had reports from playtesters of my game that touch input is not always working on these devices.

Issue 1: Touch input sometimes causes elements on page to highlight Device/browser info: {"client":{"type":"browser","name":"Mobile Safari","version":"13.1","engine":"WebKit","engineVersion":"605.1"},"os":{"name":"iOS","version":"13.5","platform":""},"device":{"type":"","brand":"Apple","model":""},"bot":null}

Also seen on Chrome iOS, which is to be expected as on iOS all browsers have to use WebKit as the engine.

Issue 2: Touch input on canvas does not work at all Still trying to get details of OS and browser but it's an iPhone 4S so very old. However, the user confirmed that this example from Mozilla DOES work on his device: https://mdn.mozillademos.org/en-US/docs/Web/API/Touch_events$samples/Example?revision=1606008&fbclid=IwAR1LKFZD2Z9rkDHkDVTtk15lNYWLUil5u3GKcB8kVcOLS2k4lYxNpzZsTGM

Note that in both cases, to rule out that I was doing something wrong with my integration of the react-canvas-draw library, I directed users to try the demo: https://embiem.github.io/react-canvas-draw/

ern-arrowsmith commented 4 years ago

Digging around, it seems like this may have something to do with passive listeners. I'm continuing to investigate but the way in which the touch listeners are set may need changing.

I tested this on an iPhone 5S today with iOS 12.4, and Mobile safari 12.1 (webkit 605.1). The behaviour I saw was that the touch input was working on the canvas, but at the same time it was dragging the page. The only way I could get it to draw without dragging was to press on the canvas and hold until the magnifier came up, at which point I could draw.

tathagatl commented 4 years ago

Hi @ern-arrowsmith , Any update on this issue?

ern-arrowsmith commented 4 years ago

Hey,

No I didn't get anywhere on it, but I haven't spent much time on the game recently.

On Mon, 20 Jul 2020, 14:33 Tathagat Lokhande, notifications@github.com wrote:

Hi @ern-arrowsmith https://github.com/ern-arrowsmith , Any update on this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/embiem/react-canvas-draw/issues/91#issuecomment-661041920, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3OBHCUIN7IZCGNS7OXL73R4RBQZANCNFSM4OQZLJOA .

mnifakram commented 3 years ago

I get it fixed by adding postition: 'relative' to the outer div. 

  <CanvasDraw
    style={{ position: 'relative' }}
  />

I think that it should be fixed and added as default though.