Leaflet map issue in Safari using iPhone and iPad

Question

I am having some weird issue with the leaflet map using Safari in iPhone and iPad. I am using an AJAX GET request to fetch the markers on the map and binding the popup conte

Answer 1

I confirm Nasir item is the correct one. Thanks!

Specifically, I changed in Leaflet.GoogleMutant.js the following line from

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000

to

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000

And now it works.

I'm not sure what is affected by this change though... thanks for comments

Luigi

Answer 2

I came across this issue while testing my app on iOS devices. The problem is that Safari does not support pointer-events as described on caniuse.com and because the googleMutant plugin CSS sets the z-index value to 1000 via the use of the leaflet-top CSS class, the browser considers it to be located above everything else.

This results in your clicks and touches being triggered on the googleMutant layer rather than the control layer.

Resetting the z-index value to a lower value, at least one that is lower than the value for the control layer should fix this problem. At least it did for me.