Leaflet: ios: dragging=false but scrolling on map not possible

Created on 29 Mar 2017 · 20Comments · Source: Leaflet/Leaflet

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

help wanted in progress

Source

oberhamsi

👍4

Most helpful comment

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.

SimonEast on 6 Nov 2017

👍15 ❤2

All 20 comments

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

perliedman on 30 Mar 2017

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 (https://github.com/Leaflet/Leaflet/blob/364bc7773568070aad596d58001018b0f0b6bb62/dist/leaflet.css#L54) fixes the problem for you? In that case, a PR would be welcome.

perliedman on 30 Mar 2017

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?

oberhamsi on 30 Mar 2017

@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.

perliedman on 30 Mar 2017

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

GeorgeColdham on 12 Jul 2017

@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!

perliedman on 14 Jul 2017

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

emirdeliz on 14 Jul 2017

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 on 26 Jul 2017

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?

kaynz on 26 Jul 2017

@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.

herrernst on 27 Jul 2017

👍1

@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.

perliedman on 29 Jul 2017

👍2

@perliedman Thanks for your responsive and patch!

herrernst on 31 Jul 2017

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

pnewo on 23 Oct 2017

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

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

SimonEast on 6 Nov 2017

👍15 ❤2

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

tomap on 10 May 2018

@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.