Giters

taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)

Home Page:http://interactjs.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pb with gesture and video on Chrome

stalb opened this issue · comments

commented

If I use gesturable on elements that embed a video, using the video controls interacts with gesturable actions.

Expected behavior

I should be able to use gesturable on an element that embeds a video and use the video controls.

Actual behavior

If I touch a video control (play/pause, etc.) then I can init a two-fingers gesture with only one finger (the other touch point is the video control).

Remark: I have this problem with Chrome (everything works well with Firefox).

System configuration

interact.js version: 1.10.17
Browser name and version: Chrome 110.0.5481.104 (64 bits)
Operating System: windows 10

Minimal example to reproduce the problem:

How to reproduce the problem:

  • load the page,
  • touch one of the video controls (play/pause/mute/unmute, etc.)
  • touch the red part with one finger and move it, interactjs interprets that as a two-fingers gesture.
commented

The bug seems to have been introduced with version v1.3.0.

commented

Hi @stalb,

I had a similar bug and managed to get around it.

TLDR: create a child element that has no child elements and is the same size and position as your gesturable element, then attach the gesture listener to it instead of the original gesturable element.

Basically I experienced the same behaviour you do, ie managing to initiate a pinch gesture with only one finger.
After some debugging it appears that an event's "touch" persisted through different touches, ie the event contained two Touches instead of one. The 'persistent' touch had the same ID, regardless how many times I used one finger.

After consulting chatGPT, it suggested that perhaps a child element is 'firing' the same event touch over and over again. So by attaching the Gesturable listener to a child element that has the same position and size as the original gesturable element AND has no other child elements (basically a random DIV with some CSS for position, height and width) I managed to get around this issue.

Please let me know if this helped you :)

Cheers,
Nitzan