UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Steps to reproduce the problem:
1. Create a document with a body and one child element, for example a div. Make the div cover 50% of the screen.

2. Attach listeners for pointer events (pointerdown, -move, -up, -cancel) to the body:
$(document.body).on("pointerdown pointermove pointerup pointercancel", handlePointerEvents);

3. Don't forget to add a touch-action css rule for body. In this example I opted for touch-action:none; so ALL touch events should be handled by the listeners.

The example above uses jQuery for convinience but I also tried it with vanilla js, I get the same results"
document.body.addEventListener("pointerdown", handlePointerEvents);

4. Open the page on Chrome for Android (or Android System WebView for that matter, both are @ 55.0.2883.91 at this moment, both have the same result)

5. Touch, drag and release directly on the body (outside of the div): all events fire as expected.

6. Touch, drag and release on the div: unexpected results.

What is the expected behavior?
I expect the following events in this order:
- pointerdown
- pointermove
- pointermove (etc)
- pointerup

What went wrong?
When I touch/drag on the child element, I get:
- pointerdown
- pointermove
- pointercancel

I think that the 'touch-action: none;' is not properly passed down to child elements because I get the same behaviour on the body when I don't add a touch-action rule to it.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 55.0.2883.91  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0

See example (attached or live @ http://test.rejh.nl/pointer-events/)

Sidenote: I haven't properly debugged this, but it seems that touch/dragging on elements that have position:absolute DOES work as expected.
 

Deleted: pointer-events.zip 4.4 KB

pointer-events.zip 4.4 KB Download