[BUG] Firefox TouchStarted not working

[IcyTv]

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Dom
• Image
• IO
• Events
• Math
• Typography
• Utilities
• WebGL
• Other (Touch? User Interaction?)

Details about the bug:

TouchStarted is not registering in Firefox

• p5.js version: latest? also web editor and react-p5 and therefore (devDependency) 1.0.0?
• Web browser and version: Firefox! (77.0.1 - latest) but not on chrome...
• Operating System: Windows, (not android - tested)
• Steps to reproduce this:
  2 Ways I tested:
  • The hard way: With react and react-p5
  • The easy way: on the p5 editor in a new sketch type:

    function setup() {
      createCanvas(400, 400);
     }
  
    function draw() {
      background(220);
    }
  
    function touchStarted() {
       console.log("Touch started"); 
    }

  I expected it to log "Touch started" but it does not do that. (mousePressed however works)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[dhoizner]

Just to add some more to this:

• it is also reproducible on Firefox on macOS
• touchEnded does work in the same sketch 🤔

[dhoizner]

@outofambit @lmccart i saw that you added a userAgent filter for safari in onmousedown here: e00e150#diff-28fb3f6087a4c536f91f1986c0787a0fR640

this filter doesn't exist in onmouseup and if removed from onmousedown, touchStarted starts working in firefox.

i'm also not seeing the event duplication on any desktop browsers with the filter removed. i can open a pr removing it but wanted to get your thoughts first.

[stalgiag]

Ah this is the cause of a problem with something that I was working on. Thanks for pointing it out! I spent a lot of time assuming that touchStarted should be working across devices. Le sigh! I don't know if those navigator.userAgent checks make sense anymore. I just looked at the property and 'Safari' is included in latest Firefox for Windows 10 but not on latest Firefox with Mac 10.15.5.

I tested extensively both with and without the navigator.userAgent checks pointed to by @dhoizner. All tests done with current main branch:

Mac 10.15.5

• Chrome 83 works currently, works with filter removed
• Firefox 77.0.1 does not work currently, works with filter removed
• Safari 13.1.1 works currently, works with filter removed

Windows 10 v1903

• Chrome 83.0.4103 works currently, works with filter removed
• Firefox 77.0.1 does not work currently, works with filter removed
• Edge 44.18362 works currently, works with filter removed

Android 9

• Chrome 81.0.4044 event fires twice currently, event fires twice with filter removed

iOS 13.5.1

• Chrome 83.0.4103 event fires twice currently, event fires twice with filter removed
• latest Firefox works currently, works with filter removed

The navigator.userAgent check does break in more browsers but I think that it is apparent that we need a better, more thoroughly tested method for deciding when to fire these events.

[stalgiag]

If anyone has ideas for a possible solution, I can test it on my temporary abundance of devices. My instinct is to say that that navigator.userAgent check should be replaced with something that only catches mobile Chrome.

[dhoizner]

@stalgiag i’m relatively new here, so not sure whether this has been looked at before... are pointer events worth looking into? We could probably still provide mouse vs touch by using the pointerType.

[stalgiag]

Welcome @dhoizner ! I don't have much experience with the input events part of the library. I know that one difficulty is that we want touchStarted and mousePressed to work interchangeably across devices that do or not have touch inputs so I am not sure that a pointerType check would work. I am not sure though! Maybe @lmccart or @outofambit have thoughts?

Here is the most recent relevant issue that I can find.

[dhoizner]

Thanks! I’ve been digging around for issues that I could tackle:).

If we want them to work interchangeably, that might make pointer events even more compelling! I think this was the exact problem they were meant to solve.

With regards to this problem, it seems that things stay as broken without the check as they do with? Might be a good idea to remove the check in that case.

[stalgiag]

Ah I see! I dug around the pointer events docs a bit more and this does look ideal but it lacks safari support. :-(

[dhoizner]

Ah I see! I dug around the pointer events docs a bit more and this does look ideal but it lacks safari support. :-(

weird! Can i use... says that newer versions of Safari do support it, I wonder what the mismatch is.

[stalgiag]

Ah I see! I dug around the pointer events docs a bit more and this does look ideal but it lacks safari support. :-(

weird! Can i use... says that newer versions of Safari do support it, I wonder what the mismatch is.

Looks like MDN needs to be updated; I'll report it. I just tested and works in Safari 13 (also in release notes). Safari 13 is supported for most iOS/macOS devices.

I don't know what the p5 community opinion is on only supporting newer versions of Safari. What do others think?