Bug 181954 - TouchMove event contains incorrect clientX / clientY after window scroll
Summary: TouchMove event contains incorrect clientX / clientY after window scroll
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-01-22 14:36 PST by alexreardon
Modified: 2022-04-04 01:43 PDT (History)
7 users (show)

See Also:

Logs (308.32 KB, image/png)
2018-01-22 14:36 PST, alexreardon
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description alexreardon 2018-01-22 14:36:32 PST
Created attachment 331965 [details]

After a window scroll, the first subsequent touch move event has incorrect clientX / clientY values. This is fixed on the next touchmove event. This occurs frequently, but not every time. It looks like around 10% of the time.
Comment 1 alexreardon 2018-01-22 14:38:11 PST
This seems related to https://bugs.webkit.org/show_bug.cgi?id=32899 but it might be a seperate issue.

I can confirm the issue still occurs:

- when the events are bound in different orders
- regardless of whether it is bound in the capture phase
- regardless of whether the touchmove handler is passive or not
Comment 2 alexreardon 2018-01-22 15:57:56 PST
It looks like multiple post scroll touchmove events can contain incorrect values
Comment 3 Simon Fraser (smfr) 2018-01-22 17:24:26 PST
Can you make a small test case?
Comment 4 alexreardon 2018-01-22 18:46:51 PST
I have put one together:


It is fairly crude but shows the issue. Press on the drag handle and move it around. You will see that it goes up on the page on Safari + iOS11 because the clientY is getting smaller after each scroll - it is being incorrectly impacted by the window scroll.

The drag handle stays in the same place in other browsers which have the correct clientX / clientY after a scroll.
Comment 5 alexreardon 2018-01-22 19:27:55 PST
I have tested it on latest Chrome on Android and the drag handle stays in the same place (the clientX and clientY are updated correctly)
Comment 6 alexreardon 2018-01-24 13:15:56 PST
Please let me know if there is any more information you need. It would be great to see this fixed! 😊
Comment 7 alexreardon 2018-02-21 13:37:53 PST
Any update on this one?
Comment 8 Toby Zerner 2019-10-29 18:11:17 PDT
Would love to see this fixed as there's not really a nice workaround. For now I've got this at the start of my touchmove event handler:

let cancelNextMoveEvent = true;

document.addEventListener('touchmove', function() {
    if (cancelNextMoveEvent) {
        cancelNextMoveEvent = false;
    cancelNextMoveEvent = true;

    // my handler code
}, { passive: false });

This means my handler will only be run on every second touchmove event, which seems to do the trick for the most part - but sometimes I do still get incorrect clientY values.
Comment 9 Jack Doyle 2022-03-02 16:22:38 PST
Any update on this? On latest iOS Safari I'm still getting this behavior quite regularly, especially if I move my finger quickly. The clientX/clientY can be WAY off (hundreds of pixels).
Comment 10 Jack Doyle 2022-03-03 21:31:35 PST
Another minimal test case: https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503?editors=0010
Comment 11 Radar WebKit Bug Importer 2022-03-30 17:25:15 PDT