Change touch device detection method

[brw]

Using navigator.maxTouchPoints to check whether a device is a "touch device" also matches laptops with touch screen support. Checking for pointer: coarse instead should only detect whether the primary input mechanism is touch (e.g. smartphones and tablets but not laptops with touch screens).

It's not perfect though. No combination of (any-)pointer and (any-)hover seems to work for detecting when I plug a physical mouse into my Android phone for example. Might have to rely on the touchstart event for that.

Checking pointer: coarse is better than the current method at least as it does properly distinguish between mobile/tablet and pc, which the current method doesn't.

Resolves #5856 (hover cards and video volume slider not showing up), resolves #5859 (enter not sending chat messages)

[haileyok]

Thank you for pointing out this problem, was not aware!

To clarify, does the current implementation work whenever you plug in a mouse to your Android, or does neither solution work for that?

[brw]

The current implementation doesn't work for that either no.

And with this method the "primary input mechanism" on a phone seems to always be touch no matter what as neither hover nor pointer change for me.

[brw]

Another thought I had was to maybe filter for PointerEvent.nativeEvent.pointType === 'mouse'. That seems to work for detecting whether the currently used pointing device is a physical mouse on pc at least.

But in my testing on Android even when using a physical mouse onPointerEnter and onPointerLeave don't seem to fire until you actually click on an element, which already doesn't make the current video player very usable when using a physical mouse on Android. I think that Android (14) and/or mobile browsers might just not support mouse hover events at all (which would make sense with touch being the main input and physical mouse usage on Android being very niche).

[brw]

Small update, I've come across a few people who also encounter this issue because they have a display drawing tablet connected to their pc, which is also recognized as a touch screen. I imagine there's a sizable group of artists on the platform also not seeing a volume slider or hover cards because of this.

[gaearon]

If you read through https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/, does the approach still hold up? (I haven't)

[brw]

Thanks for the article! Great read. Whether it holds up depends on how you look at it I suppose. Even with all the pitfalls I still think that checking for pointer: coarse is likely good enough to at least determine the initial choice on whether or not to show hover elements (as that's primarily what isTouchDevice is currently being used for). The article also agrees.

hover and any-pointer/any-hover give far too many false positives from what I've seen. pointer is at least fairly consistent (phone/tablet/Surface in tablet mode: coarse, desktop/laptop/Surface with type cover: fine). Perhaps there's some golden combination of these that I'm not seeing, but I think that a simple pointer: coarse is probably the most reliable as far as media queries go.

I did already look at https://patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/results too, which is also mentioned in the article, to help determine what to use here (though it's slightly out of date).

It would probably be a good idea to supplement this using input events like https://github.com/ten1seven/what-input to determine the currently used input method aside from the primary one (package mentioned in the article, no idea if others exist for this, I haven't been able to find any). But that's quite a bit more involved of course. And you still run into issues like the fact that hover/enter/over events aren't really supported on Android web for example (in my testing at least, they just fire on click, even with a physical mouse).

It might also be a good idea to just give the user the option to switch manually as well (which the article also suggests). Especially when taking assistive technologies and browser bugs/differences into account. There doesn't seem to be a perfectly accurate way of determining this stuff.

Switching to pointer: coarse was mostly meant as a stepping stone solution because the current method has even more issues. I'm far from an expert here so I don't feel particularly confident enough to implement something more thorough right now (nor do I have enough devices to test), but if you have any suggestions or input I'd love to hear it.