I am using leaflet.js to show information about points on a map. The idea is that the points are marked with a marker, and the user can click on that marker to open a popup with the relevant information.
Here is how it should work:
This works fine on desktop when clicking the marker, as well as on Android phones.
When I try it on an iOS system, no matter the version (I tried a few different ones) or the browser (I tried Safari, Chrome and the Telegram built-in browser), it doesn't work. The popup shows up for a split-second and disappears again. This is everything that you see if you tap the marker:
What makes this stranger is that it works as intended if you click slightly to the right of the marker. If you click in the area I marked in the picture, the popup shows up as desired:
To clarify, the marker location is at the bottom tip of the icon. Here's the code for the marker:
var future = L.icon({
iconUrl: '../images/futuremarker.png',
iconSize: [62, 92],
iconAnchor: [31, 92],
popupAnchor: [0, -70]
})
and the marker + popup-text are set like this:
L.marker([latitude, longitude], {icon: future}).bindPopup(Popup-Text).addTo(mymap);
(Please note the syntax isn't entirely correct in the snippet since I get lat, long and text through Thymeleaf, but this is unrelated)
It has to be somehow related to an iOS-specific behavior, since it works correctly everywhere else. The page it's on is just plain HTML, CSS, and JS for functions and obviously leaflet. There are no JS-frameworks or anything like that used.
