`PointerEvent.movementX` always 0 (breaks https://noisecraft.app/)

• Component: UI Events
• Status: RESOLVED FIXED

example: https://codepen.io/mantou132/pen/JjRMzMg

The `movementX` property of the `pointermove` event should be equal to `MouseEvent.movementX`

[Alexey Proskuryakov]

I can reproduce this in a recent WebKit build; works in Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/72814440>

[Steve Ruiz]

Came here to post this one.

https://codesandbox.io/s/muddy-thunder-3wesc

[Lucas Garron]

I'm also running into this issue: `movementX` and `movementY` are not populated on `pointermove` events, regardless of whether they are due to mouse, touch, or Apple Pencil.

When the source is a mouse (on macOS), the values are `0`, because the property access chains up to the `MouseEvent` prototype.

Here's a moderately useful repro:

Hosted: https://garron.net/temp/safari-movementX/
Source:
```html
<div id="log" style="background: #90B8DF; width: 90%; height: 90%">(Waiting for data.)</div>
<script>
  window.addEventListener("load", () => {
    document.body.addEventListener("pointermove", (e) => {
      console.log(e);
      document.querySelector("#log").textContent = `{movementX: ${e.movementX}, movementY: ${e.movementY}} at ${Math.round(performance.now()) / 1000}sec`
    })
  })
</script>
```

As far as I can tell, this is a bit tricky/expensive to polyfill:

- Select the correct X/Y coordinates to track per touch.
  - I believe `screenX/screenY` are best, except `screenY` is `undefined` on i[Pad]OS when the event is also used for vertical scrolling‽
- Track the last seen coordinates per `pointerId`.
  - Compensate for bugs like `undefined` values, like described above.
- Evict old cached coordinates so we don't end up with an unbounded growing cache and don't accidentally track a "movement" across mouse clicks (which seem to always have the same `pointerId`).
  - Attach listeners for `pointerup`, and `pointercancel` and hope that catches every cache eviction event‽ (Does that also need to include `pointerleave` and `pointerout`? That would cause issues for the app I'm currently working on.) Track timestamps and discard touches that are sufficiently old?

By contrast, `movementX` and `movementY` are much more ergonomic and I'd really appreciate being able to use them.

[Lucas Garron]

> except `screenY` is `undefined` on i[Pad]OS when the event is also used for vertical scrolling‽

Small correction: I think I had a typo while testing this. I'm now consistently getting both `screenX` and `screenY` values (although all the other issues I described are still relevant).

[Lucas Garron]

I'd also like to add that none of the following are effective for feature detection:

- `"movementX" in e`
- `e.movementX !== "undefined"`
- `e.hasOwnProperty("movementX")`

The fact that `movementX` can be an incorrect of `0` instead of `undefined` means that I can't trust a numerical value without something like UA sniffing, which should really be an anti-pattern at this point. :-/

[Devin Rousso]

Created attachment 451185 [details]
Patch

[Devin Rousso]

Created attachment 451298 [details]
Patch

[Devin Rousso]

Created attachment 455544 [details]
[fast-cq] Patch

[Devin Rousso]

Created attachment 455579 [details]
[fast-cq] Patch

[Devin Rousso]

Created attachment 455652 [details]
Patch

[Devin Rousso]

Created attachment 455654 [details]
[fast-cq] Patch

[Devin Rousso]

Created attachment 455708 [details]
[fast-cq] Patch

[EWS]

Committed r291886 (248885@main): <https://commits.webkit.org/248885@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 455708 [details].

[Sam Sneddon [:gsnedders]]

Just to let everyone know, for those who care about Safari, this has shipped in Safari 15.5.