Skip to content

usePinch receives duplicate events on Safari #681

@andthom

Description

@andthom

Describe the bug

Every usePinch event seems to fire at least twice on Safari.

Example

  usePinch(
    (state) => {
      const { timeStamp } =
        state;
      console.log(timeStamp);
    },
    {
      target: yourTargetHere
    }
  );

...
return (
  <div
      ref={yourTargetHere}
      style={{ position: 'relative', touchAction: 'none' }}
    >
My component is in here.
  </div>
);

yields the following on Safari:

[Log] 4983.000000000001
[Log] 4983.000000000001
[Log] 4987
[Log] 4987
[Log] 4991.000000000001 
[Log] 4991.000000000001 
...

and the following on other browsers:

Firefox:
6836
6841
6844
6848

Chrome:
5586.60000000149
5594.89999999851
5607.39999999851
5611.5

Information:

  • Use Gesture version: @use-gesture/react@10.3.1
  • Device (OS): Macbook Pro 2016 (Monterey 12.7) and Macbook Pro 2023 (Sonoma 14.4)
  • Browser: Safari

Checklist:

  • I've read the documentation.
  • If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions