rive-app / rive-app/rive-react
OnClick and scrolling not working on touch on mobile browsers
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 58
- Avg merge
- 3h 23m
- Merged PRs (30d)
- 6
Description
The changes added in 3.0.40 remove the ability to handle onClick events on a React Canvas on mobile browsers. Scrolling on touch is also not working as expected.
To reproduce, I created two examples.
On version 3.0.39 everything is working as expected:
https://codesandbox.io/s/rive-react-canvas-3-0-39-hdlvx4?file=/src/App.js
On version 3.0.40, onClick and scrolling is not working on touch (you can test it using chrome dev tools with the device toolbar to simulate a touch screen device):
https://codesandbox.io/s/rive-react-canvas-3-0-40-ushr62?file=/src/App.js
I assume this is related to the touch and drag interactions? Is it possible to disable them for touch screens?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Compare the linked CodeSandbox examples for rive-react 3.0.39 and 3.0.40, then inspect the touch and drag interaction handling introduced around 3.0.40. Reproduce the issue with Chrome DevTools' device toolbar. Done means onClick events and touch scrolling work on mobile browsers without breaking the intended touch interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100