Bug 181954

Summary: TouchMove event contains incorrect clientX / clientY after window scroll
Product: WebKit Reporter: alexreardon
Component: UI EventsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: simon.fraser, toby.zerner
Priority: P2    
Version: Safari 11   
Hardware: iPhone / iPad   
OS: iOS 11   
Description Flags
Logs none

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.