Issue metadata
Sign in to add a comment
|
Child element doesn't inherit 'touch-action' css, breaking pointer events
Reported by
roderick...@gmail.com,
Dec 16 2016
|
||||||||||||||||||||||
Issue description
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? Yes 54.0.2840.85
Does this work in other browsers? N/A
Chrome version: 55.0.2883.87 Channel: stable
OS Version: 5.1 - 7.1.1
Flash Version: Shockwave Flash 24.0 r0
See example (attached or live @ http://test.rejh.nl/pointer-events/)
Seeing these results with Chrome (Android) and Android System WebView 55.0.2883.91, on various devices running anything between Android 5.1 and 7.1.1.
Sidenote: I haven't properly debugged this, but it seems that touch/dragging on elements that have position:absolute DOES work as expected.
,
Dec 16 2016
The touch-action property doesn't inherit and is reset to auto for each element that is a scroller. In your example the pre element is a scroller itself so you'd need to set the touch-action on it. See the specification here; https://w3c.github.io/pointerevents/#the-touch-action-css-property The behavior you are seeing seems to be the same on Microsoft Edge which supports pointer events as well.
,
Dec 16 2016
Hmm. On desktop i do get a continuous stream of pointermove, both in chrome and edge, both in- and outside the pre. That is without clicking though. Also: i did a hotfix in one of my projects by giving all child elements (and childs of those etc) touch-action:pan-y and that didnt get reset on a child with overflow-x: auto..? This is very confusing behaviour :) Anyway, im on mobile now, just wanted to give a quick reply.
,
Dec 16 2016
We shouldn't see a diff on desktop for sure. chemo.d@: Regarding the "continuous stream of pointermoves" on desktop: are they from a touch-screen or touch-emulation in dev-tools?
,
Dec 16 2016
They are from a regular mouse, so that could explain the difference. But I assume(d) that the pointer events api was supposed to fix differences like these between mouse and touch input (or is it just exposing one api so devs dont have to attach multiple listeners)?
,
Dec 19 2016
Touch-action allows/disallows browser behavior for touch input. Mouse doesn't trigger browser touch actions. This is WAI. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by dtapu...@chromium.org
, Dec 16 2016