CSS touch-action property

[lucadalli]

#2691 enables model rotation to be resumed after pinch-zooming, by lifting one touch.

A side effect of this is that a rotation interaction, followed by the addition of a second finger outside the model-viewer element triggers both model rotation and page zoom simultaneously. After lifting the finger outside the model-viewer, model rotation and viewport panning continue simultaneously

Personally, I'm not so fond of this behavior.
One way to change it is to use the touch-action CSS property.
Consider a model-viewer with camera-controls enabled, zoom enabled (disable-zoom disabled) and the model-viewer touch-action property set to pan-y.
For this configuration I have tried setting the CSS touch-action property to these two values which produce different behaviors:

1. pan-y (same as the model-viewer property)
2. pan-y pinch-zoom

Do either of these two produce behavior which is considered more favorable than the current one?
Personally, I tend to lean towards pan-y pinch-zoom as it allows the page zoom to be manipulated as long as the finger on the model-viewer element is not moving.

As a side note, MDN suggests that touch events are paired with the touch-action CSS property to explicitly indicate application intent before any event listeners have been invoked.

[elalish]

That seems not ideal, though it might be easier to have the conversation in the PR. What was the behavior before (MV v1.8)? Is there not a reasonable way to work around it? I ended up adding our touch-action attribute after I found that the iOS implementation of pointer events and touch-action was so broken as to be unusable. Of course, I suppose it's always possible some other refactor might have avoided that, as I see from your PRs that iOS can be pretty finicky.

[lucadalli]

I reported incorrectly. This behavior:

a rotation interaction, followed by the addition of a second finger outside the model-viewer element triggers both model rotation and page zoom simultaneously.

was present in v1.8 too. It's this part that was introduced as a new side-effect:

After lifting the finger outside the model-viewer, model rotation and viewport panning continue simultaneously

This makes sense considering that the PR enabled rotate to be resumed after zoom. The PR did not introduce any new bugs, only made existing erratic behavior more obvious.

I understand that touch-action paired with pointer events was very temperamental, perhaps its more robust when paired with touch events?
MDN explicitly states that

Applications using Touch events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

If you agree that the behavior that has existed even prior to v1.8 is not ideal, I'd argue that testing CSS touch-action on different devices to attempt to fix it is worthwhile.

To clarify, we wouldn't remove model-viewer's touch-action property. We'd only supplement our current logic with the touch-action CSS property, set according to the model-viewer's touch-action and disableZoom properties.

That seems not ideal, though it might be easier to have the conversation in the PR

Are you referring to an existing PR, or a new PR related to this discussion?

[elalish]

I was talking about #2691, but no big deal, we can continue the conversation here. In any case, let's try to continue improving the behaviors. I'll be able to give better feedback on touch-action if I can see it in a PR. Sounds promising. Do you want to try this as part of #2691, or as a follow-on?

[lucadalli]

I'll approach it as a follow-on since it's not a bug introduced by that PR, and although related, not exactly within its scope either.

[elalish]

oh oops, I definitely meant #2724; my mistake!

[lucadalli]

Ah, no worries. The same still applies for me. Would rather have it as a follow-on.