Fix on a phone

[chadwhitacre]

At the very least, text overflows poorly at low width.

Check on an actual phone, though, to be sure it works well enough with touch.

[chadwhitacre]

Okay! I've managed to use ngrok to hit localhost from a phone. The above width bug is an issue, yes, but there are even worse problems:

• I can't close the select by clicking outside of the select.
• I can't scroll just the select, only the entire page. This may not be a problem.

[chadwhitacre]

The scrolling is almost okay. It clips the top at the top of the page, so if the select overflows the viewport you can't get to it.

Maybe we just need to do something to capture touch scroll events? Wasn't there something like that?

[chadwhitacre]

I'm looking at:

• https://api.jquery.com/scroll/
• http://api.jquerymobile.com/scrollstart/

[chadwhitacre]

If we're going to add another js dep then it's probably time to bundle vendor scripts into one to avoid multiple additional http requests.

[chadwhitacre]

We've already got the pattern, just need to apply something similar to these scripts.

[chadwhitacre]

https://coderwall.com/p/bdxjzg/tap-vs-click-death-by-ignorance

[chadwhitacre]

That post says it was updated a few months ago, but this post suggests that the 300 ms click/tap delay is actually a thing of the past.

[chadwhitacre]

I did double-check that we have width=device-width set.

[chadwhitacre]

Apparently cursor: pointer can render something clickable in mobile browsers but we don't want that off the select, only on the select.

[chadwhitacre]

Is this out of date? I think we'd still be okay to use vclick for turning off the select. Maybe that moves the content underneath if it changes the size of the document (a long select will increase the size of the document)?

Use vclick with caution on touch devices. Webkit based browsers synthesize mousedown, mouseup, and click events roughly 300ms after the touchend event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, the implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.

We recommend using click instead of vclick anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.

https://api.jquerymobile.com/vclick/

[chadwhitacre]

Alright, leaving open for now and bumping from #4305. Width bug fixed in #4435, that's enough for over there.

[chadwhitacre]

(Part of the issue is that I don't have a phone to test on anymore this afternoon.)

[chadwhitacre]

Closing in favor of #4415. Start a new PR now that this is off of #4305.