touch-action behavior when gesture begins in textarea or input

Question

It seems like when a gesture begins in textarea or input, touch-action is ignored. This is unexpected for me. Expected behavior: touch-action is taken into account and e.g. scrolling does not happen (see demo below).

Demo: https://jsfiddle.net/1x8pc5ed/1/ (Open the desktop browser developer tools and activate the touch simulation or just open it on your phone, then try to scroll the page starting the gesture from the textarea, input and other areas for comparison.)

I've tested it in Firefox and Chrome:

• Chrome ignores touch-action only in textarea case.
• Firefox ignores touch-action in input and textarea cases.

Can anyone explain this behavior? For me it looks like a bug.

Answer 1

About textarea case:

This is probably not a bug, but expected behavior.

According to https://w3c.github.io/pointerevents/#determining-supported-touch-behavior:

A touch behavior is supported if it conforms to the touch-action property of each element between the hit tested element and its nearest ancestor with the default touch behavior (including both the hit tested element and the element with the default touch behavior).

I.e. in this case the chain begins and ends on textarea because the textarea potentially has default touch behavior (potentially it can be scrollable).

Applying overflow: hidden or touch-action: none on textarea let to prevent scrolling.