New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 675971 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Jan 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

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.
 

Comment 1 by a...@scirra.com, Dec 20 2016

Tested on Android 7 on a Nexus 9 btw.
Cc: dtapu...@chromium.org mustaq@chromium.org rbyers@chromium.org nzolghadr@chromium.org
Labels: -OS-Android OS-All

Comment 3 by hdodda@chromium.org, Dec 27 2016

Cc: hdodda@chromium.org
Labels: Needs-Feedback
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! 
Components: Blink>Input
Labels: -Needs-Feedback
Status: Untriaged (was: Unconfirmed)
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?

Comment 5 by a...@scirra.com, 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.
Components: -Platform>DevTools
Status: WontFix (was: Untriaged)
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.

Comment 7 by a...@scirra.com, 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.
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.

Comment 9 by a...@scirra.com, 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?
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?
> 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.
Labels: PointerEvent

Sign in to add a comment