Touchscreen panning became janky

[jleedev]

Steps to reproduce:

1. Begin line drawing mode (e.g. press 2)
2. Put finger on touchscreen, and quickly pan a large distance

The map pans one frame then halts, and I have to try again.

Panning a small distance at first will successfully start panning the map, which can then be dragged freely.

Bisect result:
0473243 is the first bad commit

The code changes are exclusive to Safari, so the offending change boils down to this:

.ideditor, .ideditor * {
    /* disable pinch-to-zoom of the UI on touch devices */
    touch-action: pan-x pan-y;
}

I can reproduce this in Chrome OS and Chrome for Android, but not in Firefox Preview for Android — making this look like a bug in Chrome.

screen recording

[quincylvania]

@jleedev Weird bug! Thanks for reporting. I don't have an Android device for testing at the moment—I should really get one.

I added touch-action: none to the map element, so hopefully Chrome will correctly let iD handle the gestures. Please do let me know if that fixes it or not.

[jleedev]

b96401e doesn't seem to fix it.

Adding touch-action: none to .ideditor, .ideditor * does, though.

[quincylvania]

@jleedev Odd. We can't add none to everything since that disables scrolling of elements like the sidebar.

[quincylvania]

@jleedev Would you mind testing this again when you get a chance? I made the map and all its container elements touch-action: none, so Chrome shouldn't try to handle any of the gestures itself…

[jleedev]

It seems to be working!

[quincylvania]

It seems to be working!

@jleedev Huzzah! Thanks for helping debug this. It's always hard to fix browser/device-specific bugs without access to the setup in question.