Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map does not pan with touchscreen on Windows #7206

Open
omgitsgela opened this issue Jul 10, 2020 · 18 comments
Open

Map does not pan with touchscreen on Windows #7206

omgitsgela opened this issue Jul 10, 2020 · 18 comments
Labels
compatibility Cross-browser/device/environment compatibility needs more info

Comments

@omgitsgela
Copy link

I have Windows 10 Pro with a touchscreen monitor, and I'm using Chrome as my browser. I went to use one of your maps, and discovered that I can pan the map around if I use my mouse and hold left click, however your map panning does not work if you have a Windows 10 computer with a touchscreen monitor. When I touch my stylus or my finger to the screen to initiate a drag/pan of the map, nothing happens. This is a very disjointing experience, because every other map software I've used, and including the browser, responds to touch scrolling or movement of elements on the screen, except your map applet does not.

Leaflet's focus is "making the basic things work perfectly", and to that degree, I believe this to be a bug because it is a basic function of any map that should work flawlessly in modern computers.

@IvanSanchez
Copy link
Member

First off: I'm interpreting your wording as passive-aggressive, so I'm sending you off to read https://www.chiark.greenend.org.uk/~sgtatham/bugs.html . Reminding the maintainers of the design focus doesn't help, really.

Second: You didn't specify your environment (even though the bug report template prompts to do so). So, please be specific in the environment this bug is reproducible, including:

  • Leaflet version (you're working with the latest 1.6.0, right?)
  • Windows version
  • Chrome/Chromium version
  • Make/model of your touchscreen

Also:

  • Can this be reproduced ni the same computer+touchscreen with a different web browser (edge, firefox)? What versions do and don't work?
  • Does Chrome in your environment fire the right PointerEvents when using the touchscreen? i.e. what happens in a console when doing something along the lines of L.DomEvent.on(map.getContainer(), 'pointerdown pointerup pointermove', console.log); (as in this plnkr)?

@IvanSanchez IvanSanchez added compatibility Cross-browser/device/environment compatibility needs more info labels Jul 10, 2020
@IvanSanchez
Copy link
Member

I'm considering putting this under the umbrella of #7200

@johnd0e
Copy link
Collaborator

johnd0e commented Jul 11, 2020

I'm considering putting this under the umbrella of #7200

It's also possible that latest master already has that fixed.
If not, it worth checking over #7029 (and other Pull Requests of https://github.com/Leaflet/Leaflet/projects/1).

@omgitsgela
Copy link
Author

First off: I'm interpreting your wording as passive-aggressive, so I'm sending you off to read https://www.chiark.greenend.org.uk/~sgtatham/bugs.html . Reminding the maintainers of the design focus doesn't help, really.

Second: You didn't specify your environment (even though the bug report template prompts to do so). So, please be specific in the environment this bug is reproducible, including:

  • Leaflet version (you're working with the latest 1.6.0, right?)
  • Windows version
  • Chrome/Chromium version
  • Make/model of your touchscreen

Also:

  • Can this be reproduced ni the same computer+touchscreen with a different web browser (edge, firefox)? What versions do and don't work?
  • Does Chrome in your environment fire the right PointerEvents when using the touchscreen? i.e. what happens in a console when doing something along the lines of L.DomEvent.on(map.getContainer(), 'pointerdown pointerup pointermove', console.log); (as in this plnkr)?

My apologies if this came off as passive aggressive. Github was trying to ask if this was a feature request or a bug report, so I figured it was a bug based on the design focus. It was not my intention to make that sound like anything. I don't frequent bug reporting communities, so maybe there's a certain level of objectiveness or information I'm missing. Again, I apologize for this. I'm just an end user who would like to see the best for the public, including myself. :)

I am not sure the leaflet version, can't find it in the map view or in the HTML source code. When I go to leafletjs.com, I am testing this functionality on the map present there today. I noticed the bug when I was trying to interact with geocaching.com's implementation of the map, but for testing I'm using your live sample on the main website.

Windows version: Windows 10 Pro 19041.329

Chrome version: 83.0.4103.116/Official Build

Touchscreen: Panasonic Toughbook CF-31 OEM, Fujitsu FCL USB Pen tablet. It's a single point resistive touchscreen.

Other browsers: Edge 44.19041.1.0 does work as intended, both pan and doubletap (although CTRL+Doubletap zooms in, not out, strangely enough.)

I see your code asking what Chrome does in my environment under certain programming conditions, but I don't understand how to test what you are asking for.

Does this help? Let me know what I can do to help you fix this problem :)

@johnd0e
Copy link
Collaborator

johnd0e commented Jul 14, 2020

Let me know what I can do to help you fix this problem :)

https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html
Try to pan here, and compare Chrome log with Edge log.

@mobinseven
Copy link

https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html
Try to pan here, and compare Chrome log with Edge log.

I have tested this page on my Surface 3 device with Chrome and Edge. Using none I could pan/pinch-zoom via touch or pen. The only action worked as expected was double tap to zoom-in.
If by "log" you mean the printed text in page, logs are identical on both browsers in my case. Both detected the pointer type (pen/touch) correctly.
Versions:
Windows 10 Home 1909
Chrome 84.0.4147.89
Edge 84.0.522.40

@mobinseven
Copy link

https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html

Using Firefox on Surface 3 device btw, I could pan with both touch and pen. But still could not pinch-zoom.
Something interesting happens with logs: When I pan using pen, the moment that the map starts to pan, the recorded pointer type changes from "pen" to "touch":

id:115 [0] -1 0 (pen) pointermove
id:115 [0] 0 0 (touch) pointerup <- pen up from screen
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove
id:115 [1] -1 1 (touch) pointermove <- map starts to pan
id:115 [1] -1 0 (pen) pointermove
id:115 [1] 0 1 (touch) pointerdown <- pen touches the screen
id:115 [0] -1 0 (pen) pointermove
id:114 [0] -1 0 (pen) pointermove
id:114 [0] -1 0 (pen) pointermove

and for the unsuccessful pinch zoom the log was:

id:131 [0] 0 1 (touch) pointercancel (not primary)
id:130 [1] 0 1 (touch) pointercancel
id:131 [2] 0 1 (touch) pointerdown (not primary)
id:130 [1] 0 1 (touch) pointerdown

In contrast with Chrome and Edge where pinch-zoom, zoomed the webpage, in Firefox nothing happens when you pinch-zoom the map.

Versions:
Windows 10 Home 1909
Firefox 78.0.2

@Beelucky

This comment was marked as off-topic.

@BobbyRuby
Copy link

BobbyRuby commented Jul 26, 2020

I just tried on surface last night as I'm building a Pole Permitting and Strand Mapping application for the telecommunications industry. I will update later with the surface version model.

I know it was Windows 10 Pro and was Using Edge.

Specifics to come later after I check it's use in other browsers as well, I just need to get my ass in bed now though and did a quick search to see if this was just me or others were having issues.

@omgitsgela
Copy link
Author

Let me know what I can do to help you fix this problem :)

https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html
Try to pan here, and compare Chrome log with Edge log.

I opened up the test and gave it a try. Double tap zoom in works. Double tap zoom out works when shift is held. This is not a multi touch display so I can't test pinch zoom. Panning the map does not work, but creates event log data, as seen below. This data is created whether I'm on the map element or base page... the only difference is if I try and pan on the log which is unpannable there's a pointercancel event.:

id:4 [0] 0 0 (touch) pointerup
id:4 [1] -1 1 (touch) pointermove
id:4 [1] -1 1 (touch) pointermove
id:4 [1] -1 1 (touch) pointermove
id:4 [1] -1 1 (touch) pointermove
id:4 [1] -1 1 (touch) pointermove
id:4 [1] 0 1 (touch) pointerdown
id:3 [0] 0 0 (touch) pointerup
id:3 [1] -1 1 (touch) pointermove
id:3 [1] -1 1 (touch) pointermove
id:3 [1] -1 1 (touch) pointermove
id:3 [1] -1 1 (touch) pointermove
id:3 [1] 0 1 (touch) pointerdown
id:2 [0] 0 0 (touch) pointerup
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] 0 1 (touch) pointerdown

@tomchadwin
Copy link
Contributor

tomchadwin commented Sep 8, 2020

Are there fundamental differences between multi-touch (eg MS Surface) and single-touch? At the moment, I've only tested https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html on a Surface:

Chrome 85.0.4183.83

  • Mouse events work fine
  • Only touch event which works is double-tap zoom (in and out via Shift)
  • Touch pan fails:
id:2 [0] 0 0 (touch) pointerup
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] 0 1 (touch) pointerdown

Edge 85.0.564.44

  • Mouse events work fine
  • Only touch event which works is double-tap zoom (in and out via Shift)
  • Touch pan fails:
id:2 [0] 0 0 (touch) pointerup
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] -1 1 (touch) pointermove
id:2 [1] 0 1 (touch) pointerdown

So Edge behaves the same as Chrome.

Pinch-zoom in both browsers zooms the whole page (native behaviour as though no Leaflet map were present). I can give the debug output of that if required, but it's obviously noisier.

@johnd0e
Copy link
Collaborator

johnd0e commented Sep 8, 2020

@tomchadwin
Copy link
Contributor

tomchadwin commented Sep 8, 2020

@johnd0e

Both those links now work correctly in those browsers on a Surface. Thank you!

I've got a an external touchscreen, but it appears to be multitouch (and I can't find the PSU), so I doubt that will shed more light. Need a single-touch device, and don't think I've got one. How common are non-multitouch Windows touchscreen setups? Is there an argument that it's too niche for support?

@johnd0e
Copy link
Collaborator

johnd0e commented Sep 8, 2020

Both those links now work correctly in those browsers on a Surface. Thank you!

That means that your issue is already fixed in latest Leaflet, so update it on your side.

I've got a an external touchscreen, but it appears to be multitouch (and I can't find the PSU), so I doubt that will shed more light. Need a single-touch device, and don't think I've got one. How common are non-multitouch Windows touchscreen setups? Is there an argument that it's too niche for support?

Sorry, I do not understand what are tou trying to do.
Do you have Leaflet issues with that external touchscreen?
Do that issues belong to this issue, or we can close it?

@tomchadwin
Copy link
Contributor

I have no issue - I was trying to help debug this issue (after it was mentioned online: https://twitter.com/tomchadwin/status/1302950132393140224). If it's fixed, fine (I assumed it wasn't because it was still open). As I say, there might be a remaining issue with single-point touch devices, but I don't have one to test with.

@johnd0e
Copy link
Collaborator

johnd0e commented Sep 8, 2020

Ok, let's wait for @omgitsgela reply.

@tomasanjosbarao
Copy link

tomasanjosbarao commented Sep 10, 2020

I have a similar problem and didn't know if I should open a new issue. It only happens in Firefox (80.0.1 x64) (I'm on Windows 10) and with my Wacom Intuos pen tablet. The map pans correctly if I start by using the trackpad, but from the moment I click it for the first time with the stylus it stops panning — even with the trackpad I can not pan anymore, unless I reload the page.

I tested it on the leafletjs.com homepage and on the test page by @johnd0e. pointermove, pointerdown and pointerup are working as expected, both with pen and trackpad.

@johnd0e
Copy link
Collaborator

johnd0e commented Sep 10, 2020

I tested it on the leafletjs.com homepage and on the test page by @johnd0e.

And pan brakes in both cases, right?

pointermove, pointerdown and pointerup are working as expected, both with pen and trackpad.

We need to see exact log of this page: https://gist.githack.com/johnd0e/8abac2f4af311bd3cc842270c01cf497/raw/test-taphold-pan.html

I have a similar problem and didn't know if I should open a new issue.

I suppose you should open separate issue.

landonreed added a commit to opentripplanner/otp-react-redux that referenced this issue Feb 8, 2021
bumped in order to fix map pan issue (potentially the same one noted in
Leaflet/Leaflet#7206)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
compatibility Cross-browser/device/environment compatibility needs more info
Projects
None yet
Development

No branches or pull requests

8 participants