| Summary: | TouchMove event contains incorrect clientX / clientY after window scroll | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | alexreardon | ||||
| Component: | UI Events | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | a_protyasha, bfulgham, graouts, hi, hi, jack, neilgirardi, simon.fraser, toby.zerner, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 11 | ||||||
| Hardware: | iPhone / iPad | ||||||
| OS: | iOS 11 | ||||||
| Attachments: |
|
||||||
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 It looks like multiple post scroll touchmove events can contain incorrect values Can you make a small test case? I have put one together: https://codepen.io/alexreardon/pen/BJEaRL?editors=1111 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. 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) Please let me know if there is any more information you need. It would be great to see this fixed! 😊 Any update on this one? 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;
return;
}
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.
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). Another minimal test case: https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503?editors=0010 Is anyone taking action on this? It appears this issue has been open for four years. Thank you and Happy Holidays. Yeah, this seems like a pretty major problem to leave unresolved for almost 5 years. Any updates? Bumping. It would be amazing to get this fixed. 💜 Hi all. I'm looking at this bug report and wanted to revive the conversation a little bit. My impression is that programmatic scrolling isn't synchronized with touch event location (client X/Y)? Here's a distilled test case: https://codepen.io/aprotyas/pen/PoyZBKR. Let me know if I'm mischaracterizing (or not capturing at all) the bug. |
Created attachment 331965 [details] Logs 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.