Unable to drag on Firefox's responsive design mode (r is undefined)

[rayhanw]

mapbox-gl-js version:1.4.1 (also had the same issue on 1.4.0)

browser: Firefox Quantum (69.0.3)

Steps to Trigger Behavior

1. Switch to firefox responsive design mode
2. Choose a phone preset (Only does not work on any phone preset, works fine if on responsive preset)
   List of broken phone presets:

• Galaxy S9/S9+
• iPad
• iPhone 6/7/8
• iPhone 6/7/8 Plus
• iPhone X/XS
• Kindle Fire HDX
• Galaxy Note 9

Link to Demonstration

https://codepen.io/rayhanw/pen/poobNrY
EDIT: No longer need mapbox api key, as i made an alternate public one for the purpose of demonstrating this error

Expected Behavior

Content of map gets dragged around

Actual Behavior

• Getting an r is undefined error when trying to drag the map
• Map does not get dragged
  

[arindam1993]

This looks like a bug with firefox's touch event simulator, its sending and invalid TouchEvent instance that does not have the touches array.

[kkaefer]

I confirmed with a physical iOS devices that it does indeed get touches. In addition, Firefox seems to add a touch to the TouchList object at some point after calling DOM.mousePos: When using console.log, the TouchList objects show up as empty, but when expanding them, the actually do contain the touch.

https://bugzilla.mozilla.org/show_bug.cgi?id=1588438 looks like it might be related.

[kkaefer]

I can also reproduce https://bugzilla.mozilla.org/show_bug.cgi?id=1549220: when adding a console.log(e) before acessing e.touches[0], the TouchList is correctly populated and the error goes away.

[kkaefer]

I don't think we should add a workaround for this, given that the Responsive Design Mode is a developer tool and end users are unlikely to encounter this.