ios: dragging=false but scrolling on map not possible #5425

oberhamsi · 2017-03-29T15:08:15Z

How to reproduce

Leaflet version I'm using: 1.0.3
Browser (with version) I'm using: Safari/602.1
OS/Platform (with version) I'm using: iOS 10

What behaviour I'm expecting and which behaviour I'm seeing

When dragging is disabled, i expect the page to scroll when i drag over the map on ios. instead, nothing happens. on android i can scroll by dragging if dragging=false.

Minimal example reproducing the issue

On ios, it's not possible to scroll the page when dragging on the map:

https://jsfiddle.net/geg8yLe3/

This is similar to #5343

The text was updated successfully, but these errors were encountered:

perliedman · 2017-03-30T07:24:13Z

This sounds a lot like #4051, which should have been fixed in #4552. Lets see why that fix does not work now.

perliedman · 2017-03-30T07:43:04Z

I tried the fiddle on my Android device, where it works as expected, and enabling dragging also works as expected, so it looks like an iOS specific bug.

Looking at http://caniuse.com/#feat=css-touch-action, it seems that iOS only has partial support for touch-action, which is probably the reason for this problem.

In the linked fiddle, the map has touch-action: pan-x pan-y; - a fix for this particular problem would be setting touch-action: auto; for iOS. @oberhamsi could you verify if adding an extra rule touch-action: auto before the current (

Leaflet/dist/leaflet.css

Line 54 in 364bc77

touch-action: pan-x pan-y;

) fixes the problem for you? In that case, a PR would be welcome.

oberhamsi · 2017-03-30T08:10:54Z

sadly it didn't help: i updated the fiddle to set touch-action:auto on .leaflet-touch-zoom. then i also set pointer-event:auto on .leaflet-tile-container but still no effect.

https://jsfiddle.net/geg8yLe3/6/

could one of the event handlers do preventDefault?

perliedman · 2017-03-30T10:50:31Z

@oberhamsi huh, that's weird.

Regarding preventDefault, there shouldn't be any listeners once you disable the drag handler, since the L.Draggable is disabled and unregisters its listeners for this case.

@oberhamsi it would be interesting if you could possibly dig into this and try to debug what's happening, unfortunately I don't have easy access to any iOS device.

GeorgeColdham · 2017-07-12T12:46:35Z

Has there been any resolution to this? Still having this issue.

perliedman · 2017-07-14T10:24:33Z

@GeorgeColdham sadly, no. As mentioned in my last comment, I'm stuck since I don't have easy access to any iOS device to test with, since this does work as expected on Android.

We need to examine which CSS rules or event handlers that trigger on iOS that prevents the map from scrolling, so any help with this would be greatly appreciated!

emirdeliz · 2017-07-14T13:20:36Z

I have the same problem. I'm using the webview in IOS. But the problem occurs without web preview as well. I tested on chrome and safari. My device is iphone 4s

kaynz · 2017-07-26T07:44:03Z

Hi,
I can reproduce this with the native android browser "com.android.browser".
UserAgent:
Mozilla/5.0 (Linux; Android 5.0.2; LG-D802/V30f Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/34.0.1847.118 Mobile Safari/537.36

kaynz · 2017-07-26T09:37:12Z

The Google Maps JS SDK has the same function properly working on iOS/Android. As far as I can see it works without touch-action. Any idea how they do it?

herrernst · 2017-07-27T12:24:42Z

@perliedman I think the root issue is the preventDefault in the touchstart handler here: https://github.com/Leaflet/Leaflet/blob/v1.0.3/src/map/handler/Map.Tap.js#L32

If I remove it (or add tap=false to options), it works on iOS. The problem would also appear in Chrome on Android before version 55 (Chrome since version 55 has support for pointer events and then uses different code paths in Leaflet). You can check it if you go to chrome://flags on your Android device and set pointer events to Disabled.

…ixes #5425

perliedman · 2017-07-29T21:43:03Z

@herrernst huh, nice analysis! Thanks!

It is definitely the tap handler that causes this. Looking at the test code we used in #4051, we actually had tap: false.

So, for now, the workaround is to not only set dragging: false but also tap: false to achieve desired behavior.

I've submitted #5670 in an attempt to address this, so that we do not preventDefault for the source of a simulated event unless there is handler for the simulated event.

herrernst · 2017-07-31T09:56:49Z

@perliedman Thanks for your responsive and patch!

pnewo · 2017-10-23T12:20:37Z

This can be reproduced on android (7.0) with at least the latest beta version of Firefox 2

SimonEast · 2017-11-06T06:10:37Z

I can confirm that the following code seems to be a valid workaround for ensuring that a single finger scrolls the page and not the map, while still allowing for two-finger zoom+pan of the map, as well as tapping on markers. This improves usability on mobile when a map is a part of a larger page that requires scrolling.

L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile
})

Confirmed in iOS 10 Safari and Chrome. Not yet fully tested on Android.

tomap · 2018-05-10T09:38:15Z

I also confirm it works in iOS 11.3.1, on both safari and chrome 66
and on android chrome 66

jasonjflaherty · 2018-07-16T21:33:49Z

@SimonEast Seems to work good in mobile FireFox on Android, Chrome doesn't like it as much. Zooms the whole website. iOS(11.4) Safari and FF work great. I've tried 4 or 5 different css/js tricks, in the end this one works out of the box. Thank you.

…ixes Leaflet#5425

HlaingTinHtun · 2020-02-27T13:24:19Z

Does anyone find the solution yet ?
I set dragging & tap as false and still not working.

johnd0e · 2020-03-18T15:16:18Z

I set dragging & tap as false and still not working.

@HlaingTinHtun
May be your case is different from discussed. Please provide sample fiddle to let us to reproduce your problem.

johnd0e · 2020-03-18T15:19:18Z

It is definitely the tap handler that causes this.

Then it can be fixed with #7026.

Test page is here: https://jsfiddle.net/johnd0e/8kytb1dc/2/show

johnd0e · 2020-04-08T12:36:14Z

so it looks like an iOS specific bug.

I can confirm that it is not.
The same is reproducible on Android, in Firefox 68.6, and seems caused by L.Map.Tap. as already reported.

Solve a usability issue when a user's scrolls on pages with a map and additional content below. When the user is scrolling, and the mouse goes over the map, the window stops scrolling, and the map starts moving; this behaviour annoys the users as they expect to keep scrolling the page to the bottom. A similar problem occurs when browsing the page on touchable devices like phones or tablets. We are disabling the mouse wheel map listener to keep scrolling to the page bottom on desktop devices. We are disabling the dragging and the tap features for mobile devices, although as the user can not move the map, we need arrow controls to allow users to change the map pan. Credits for the mobile solution are for SimonEast [1]. [1] Leaflet/Leaflet#5425 (comment)

Solve a usability issue when a user's scrolls on pages with a map and additional content below. When the user is scrolling, and the mouse goes over the map, the window stops scrolling, and the map starts moving; this behaviour annoys the users as they expect to keep scrolling the page to the bottom. A similar problem occurs when browsing the page on touchable devices like phones or tablets. We are disabling the mouse wheel map listener to keep scrolling to the page bottom on desktop devices. We are disabling the dragging and the tap features for mobile devices, although as the user can not move the map, we need arrow controls to allow users to change the map pan. Credits for the mobile solution are for SimonEast [1]. [1] Leaflet/Leaflet/issues/5425#issuecomment-342055520

perliedman added the help wanted label Jul 14, 2017

perliedman pushed a commit that referenced this issue Jul 29, 2017

Do not preventDefault for simulated events unless a listener exists; f…

c29dabe

…ixes #5425

perliedman mentioned this issue Jul 29, 2017

Do not prevent default on source of simulated event if simulated event is unhandled #5670

Closed

cherniavskii added the in progress label Oct 15, 2017

gu-stav pushed a commit to zoff-kollektiv/klimawende-prototype that referenced this issue Feb 27, 2019

Map: see if this fixes the iOS scrolling issue (Leaflet/Leaflet#5425)

76b7530

ripoul mentioned this issue Jun 20, 2019

désactive zoom on scroll NantesJS/nantesjs-website#120

Merged

d-m- pushed a commit to d-m-/Leaflet that referenced this issue Aug 20, 2019

Do not preventDefault for simulated events unless a listener exists; f…

88ffb79

…ixes Leaflet#5425

johnd0e mentioned this issue Mar 18, 2020

New TapHold handler instead of legacy Tap #7026

Merged

4 tasks

johnd0e mentioned this issue Apr 6, 2020

Two-Finger gestures disabled when dragging disabled in samsung browser #5969

Closed

johnd0e added this to Issues (addressed) in Refactor [touch/pointer] events Apr 7, 2020

Falke-Design added the mobile label Nov 14, 2021

mourner closed this as completed in #7026 Nov 26, 2021

Refactor [touch/pointer] events automation moved this from Issues (addressed) to Fixed issues Nov 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ios: dragging=false but scrolling on map not possible #5425

ios: dragging=false but scrolling on map not possible #5425

oberhamsi commented Mar 29, 2017 •

edited

perliedman commented Mar 30, 2017

perliedman commented Mar 30, 2017

oberhamsi commented Mar 30, 2017

perliedman commented Mar 30, 2017

GeorgeColdham commented Jul 12, 2017

perliedman commented Jul 14, 2017

emirdeliz commented Jul 14, 2017 •

edited

kaynz commented Jul 26, 2017

kaynz commented Jul 26, 2017

herrernst commented Jul 27, 2017 •

edited

perliedman commented Jul 29, 2017 •

edited

herrernst commented Jul 31, 2017

pnewo commented Oct 23, 2017

SimonEast commented Nov 6, 2017 •

edited

tomap commented May 10, 2018

jasonjflaherty commented Jul 16, 2018 •

edited

HlaingTinHtun commented Feb 27, 2020 •

edited

johnd0e commented Mar 18, 2020 •

edited

johnd0e commented Mar 18, 2020 •

edited

johnd0e commented Apr 8, 2020 •

edited

ios: dragging=false but scrolling on map not possible #5425

ios: dragging=false but scrolling on map not possible #5425

Comments

oberhamsi commented Mar 29, 2017 • edited

How to reproduce

What behaviour I'm expecting and which behaviour I'm seeing

Minimal example reproducing the issue

perliedman commented Mar 30, 2017

perliedman commented Mar 30, 2017

oberhamsi commented Mar 30, 2017

perliedman commented Mar 30, 2017

GeorgeColdham commented Jul 12, 2017

perliedman commented Jul 14, 2017

emirdeliz commented Jul 14, 2017 • edited

kaynz commented Jul 26, 2017

kaynz commented Jul 26, 2017

herrernst commented Jul 27, 2017 • edited

perliedman commented Jul 29, 2017 • edited

herrernst commented Jul 31, 2017

pnewo commented Oct 23, 2017

SimonEast commented Nov 6, 2017 • edited

tomap commented May 10, 2018

jasonjflaherty commented Jul 16, 2018 • edited

HlaingTinHtun commented Feb 27, 2020 • edited

johnd0e commented Mar 18, 2020 • edited

johnd0e commented Mar 18, 2020 • edited

johnd0e commented Apr 8, 2020 • edited

oberhamsi commented Mar 29, 2017 •

edited

emirdeliz commented Jul 14, 2017 •

edited

herrernst commented Jul 27, 2017 •

edited

perliedman commented Jul 29, 2017 •

edited

SimonEast commented Nov 6, 2017 •

edited

jasonjflaherty commented Jul 16, 2018 •

edited

HlaingTinHtun commented Feb 27, 2020 •

edited

johnd0e commented Mar 18, 2020 •

edited

johnd0e commented Mar 18, 2020 •

edited

johnd0e commented Apr 8, 2020 •

edited