Issues with drawing on iOS devices

[ern-arrowsmith]

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]

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]

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

[ern-arrowsmith]

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, ***@***.***> 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 <#91 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA3OBHCUIN7IZCGNS7OXL73R4RBQZANCNFSM4OQZLJOA> .

[mnifakram]

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.