Skip to content
This repository has been archived by the owner on Aug 1, 2022. It is now read-only.

Issues with drawing on iOS devices #91

Open
ern-arrowsmith opened this issue Jul 5, 2020 · 4 comments
Open

Issues with drawing on iOS devices #91

ern-arrowsmith opened this issue Jul 5, 2020 · 4 comments
Labels
bug Something isn't working

Comments

@ern-arrowsmith
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link

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

@ern-arrowsmith
Copy link
Contributor Author

ern-arrowsmith commented Jul 20, 2020 via email

@mnifakram
Copy link

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.

@embiem embiem added the bug Something isn't working label Nov 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants