Longtap on markers prompts context menu to save the image

[eliboni]

trafficstars

This is linked to #6817 fixed by #6855.

How to reproduce: https://jsfiddle.net/f7onauw9/1/

Leaflet Version: Leaflet master as of yesterday (with #6855 in)

Long tap on map: works thanks to #6855, alert appears highlighting a contextmenu/longtap has been detected Long tap on marker: user gets screen to save/share Marker icon, after closing it the alert appears

Expected behavior: when long tap on Marker OS menu to save image should not appear

Relevant code:

var map = L.map('map', { center: [44.22253, 11.77083], zoom: 4, maxZoom: 18, layers: [ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')` ], attributionControl: false, tap: true}); map.on('contextmenu', function(e) {alert("MAP: contextmenu/longtap detected"); }); var m = L.marker([44.22253, 11.77083]); m.on('contextmenu', function(e) {alert("MARKER***: contextmenu/longtap detected"); } ); map.addLayer(m);

[filcab]

(It's probably more appropriate to post here, instead of on the closed issue)

Hi @eliboni, It seems you need to use -webkit-touch-callout: none; (or similar... I'm bad at this 😅) on the elements. Unsure on which, though. Adding * { -webkit-touch-callout: none; } worked on my test (contextmenu event triggered on a marker, using an iPhone). Adjust as you need.

Maybe leaflet can have a class with that CSS for when contextmenu events are listened on by markers? Otherwise, it might best to fix on the page using leaflet?

[eliboni]

@filcab many thanks. It worked by adding this to just the leaflet-marker-icon class:

.leaflet-marker-icon { -webkit-touch-callout: none; }

Test URL: https://www.mappite.org/tap/testTap2.html

I agree on your suggestion. I wander why this was not needed in the past, is this really linked to #6817?

[filcab]

I think iOS13 might have changed something. But I don't think this is 6817, as that bug was about events not triggering at all due to PointerEvents being available. These aren't triggering due to webkit features for long tap, which have to be disabled.

[johnd0e]

I see similar issue on Android, with latest Chrome, and with Firefox Preview 4.0.0 And there is no -moz-webkit-touch-callout or anything similar. preventDefault() is not useful too, as menu pops before event listener called.

[eliboni]

Any final / official solution on this one? Also with 1.8.0, when long tapping on a marker (iOS 15.5), the event is properly handled by leaflet but the marker then gets magnified with the option to save/share the icon. I'm wondering if this is connected with @1926 , anyway "-webkit-user-select: none" does not solve the issue, while "-webkit-touch-callout: none;" does the job.

Can the latter be added to default leaflet.css as well?

.leaflet-marker-icon { -webkit-touch-callout: none; }

Here is current behaviour with 1.8.0 and long tap: https://imgur.com/J8DE8bQ.png

[Falke-Design]

@eliboni does it also happens when you make a long click on the zoom control and while making a long click on the shadow of the marker?

[eliboni]

When clicking on shadow the behaviour is different, the "+" of the zoom control gets selected! The same happens when long tap anywhere else on the map

On Fri, May 20, 2022, 17:43 Florian Bischof @.***> wrote:

@eliboni https://github.com/eliboni does it also happens when you make a long click on the zoom control and while making a long click on the shadow of the marker?

— Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet/issues/6865#issuecomment-1133052250, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEGPNA5K3TY72HBYVXCBY53VK6XIRANCNFSM4JCJUJ7Q . You are receiving this because you were mentioned.Message ID: @.***>

[Malvoz]

Re https://github.com/Leaflet/Leaflet/issues/6865#issuecomment-1133030697:

added to default leaflet.css

.leaflet-marker-icon { -webkit-touch-callout: none; }

Sure, but that would only fix the issue in Safari.

Re https://github.com/Leaflet/Leaflet/issues/6865#issuecomment-1133116467:

When clicking on shadow the behaviour is different, the "+" of the zoom control gets selected!

That's about text selection, separate issue: https://github.com/Leaflet/Leaflet/issues/6872.

(However, even the <a href="#"> controls (e.g. zoom controls) can prompt the URL "touch callout", that issue would be fixed by either https://github.com/Leaflet/Leaflet/issues/7821 or https://github.com/Leaflet/Leaflet/issues/7368.)

[eliboni]

Re #6865 (comment):

added to default leaflet.css .leaflet-marker-icon { -webkit-touch-callout: none; }

Sure, but that would only fix the issue in Safari.

Well, the issue is only with Safari (up to current iOS 15.5) - I just noticed you update the issue title, this is iOS specific

[Malvoz]

this is iOS specific

@eliboni No, see https://github.com/Leaflet/Leaflet/issues/6865#issuecomment-599536458.

Expected behavior: when long tap on Marker OS menu to save image should not appear

I can also reproduce the behavior on Android, Chrome:

[eliboni]

@Malvoz, you're right: from Leaflet tutorial in facts I get the prompt to save the marker icon.

However, this does not happen if there is a long-tap event (contextmenu) registered on the marker https://jsfiddle.net/f7onauw9/1/ - that's why I did not realize the issue (is it an issue?) with chrome: in my use case a long tap is used to remove a marker form th emap, hence it seems to work fine in any browser but Safari - Safari prompts to save the icon after catching the event.

Anyway, the behavior to ask to save the image may be the expected one if no event is associated with a long press/contextmenu, isn't it?

If it is the case, it seems just in Safari the "contextmenu" event is propagated to trigger the browser save image menu, while it should not, IMHO.

Enrico

[eliboni]

EDIT: corrected jsfiddle.net link above, the safari issue does not appear with older leaflet versions (1.0 for example).