Add diagnostics to say why pointercancel fired
Reported by
a...@scirra.com,
Dec 20 2016
|
||||||
Issue description
Steps to reproduce the problem:
I am trying to port some touch events code ("touchstart" et al) to the new Pointer Events API ("pointerdown" et al). However after swapping events like "touchstart" for "pointerdown", I'm finding that each touch fires "pointerdown", then immediately after the first "pointermove", a "pointercancel" event. This breaks everything since touches no longer track movement. I have spent a few hours on this and still don't really have any idea why this is happening. All I have found is it is something to do with the touch-action CSS style, but I don't understand why this should affect it (the viewport is fixed scale and there are no scrolling elements).
What is the expected behavior?
"pointercancel" events should have some kind of diagnostic, stack trace or otherwise an indication of why they fired. E.g. if it depends on particular CSS styles, then it should identify which.
What went wrong?
"pointercancel" events prove infeasible to debug and so we are forced to leave our code using touch events.
Did this work before? N/A
Chrome version: 57.0.2956.0 Channel: canary
OS Version: 7
Flash Version: Shockwave Flash 24.0 r0
I also cannot find much documentation about this. A list of circumstances in which pointercancel fires would be useful too.
,
Dec 24 2016
,
Dec 27 2016
Thanks for reporting the issue . @ash-- Could you please provide us the sample test case to reproduce the issue , so that it would help us in triaging the issue better. Thanks!
,
Jan 2 2017
One of the best guides for this is here: https://developers.google.com/web/updates/2016/10/pointer-events#default_actions The older Microsoft documentation is also decent: https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/pointer-events/ Basically if you don't want any browser scrolling or zooming, just apply "touch-action: none". I've attempted to update the documentation in MDN to make this clearer: https://developer.mozilla.org/en-US/docs/Web/Events/pointercancel https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action Would that have been enough to prevent your confusion? Offhand I can't think of any UX we could add to DevTools to help without being spammy for all the legitimate cases where you expect a pointercancel (eg. pointerdown/pointerup/pointercancel listeners that just activate button styling). I suppose we could have some sort of "reason" associated with a pointercancel (and maybe a warning whenever there's a pointerdown listener but no pointercancel listener), but the reason would almost always be "touch-action" so I'm not sure it would help in this case. Maybe if it linked to a tutorial on the web?
,
Jan 3 2017
So if I apply * { touch-action: none; }, it works, but then overflow: scroll elements stop scrolling. touch-action also does not inherit. So it looks like I have to write a selector that matches every non-scrolling element and apply touch-action: none to that. That's pretty complicated, is this really the expected work required to port touch events to pointer events?
I have a fixed viewport and a non-scrolling element and touching it immediately cancels the pointer. Is that allowed or is it probably a bug? I can't think of any reason the pointer would be cancelled, and none of those listed in the documentation links you provided seem to apply.
,
Jan 3 2017
By "touching immediately cancels the pointer", did you mean touch-dragging? If your answer is yes, then I think this is working as expected. Perhaps all you need is adding a "touch-action:none" to your non-scrollable root element because this touch-action would inherit through other non-scrollable elements.
,
Jan 3 2017
Yes, I mean touch-dragging. But touch-action: none does not inherit, so it doesn't affect anything else. So if you apply it to root, it has no effect on say a div element in the document.
,
Jan 3 2017
Touch-action inherits to non scrollable element only. Here is a quick demo: https://jsbin.com/xupagik/edit?html,output Touc-dragging on red doesn't fire pointercancel because the red div inherits body's touch-action:none. This is not the case with the green div because it is scrollable.
,
Jan 3 2017
Okay, so if I have a non-scrollable child of a parent with touch-action: none, that is cancelling touch-dragging, would that be a bug I should file?
,
Jan 3 2017
Yeah touch-action technically doesn't "inherit" but it's effect is computed by consulting ancestors. So in your case it sounds like you simply want "html { touch-action: none; }".
Thanks for pointing out that this wasn't clear in the documentation. I've added a bunch more text at https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action - does that clarify the situation?
,
Jan 3 2017
> Okay, so if I have a non-scrollable child of a parent with touch-action: none, that is cancelling touch-dragging, would that be a bug I should file? If by "non-scrollable" you mean does not involve a scrolling box (i.e. overflow:scroll or overflow:auto) at all, then yes. But if it does have a scrolling box and is "non-scrollable" only because the content is currently not large enough to create any overflow, then no - that's by design. touch-action is designed so that the need to use it doesn't depend on the specific size computed for an element. Eg. we wouldn't want a missing touch-action to show up as a bug only when the user increases their font size, or in languages that happen to have longer words.
,
Jan 4 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by a...@scirra.com
, Dec 20 2016