I am showing position from django model like marker with popup:
my view file
<script>
const MAP_KEY = "{{ MAP_KEY }}";
const added_place_json = JSON.parse('{{ added_place_json | escapejs}}');
</script>
my js file
for (const place of added_place_json){
L.marker([place.fields.lat, place.fields.long]).bindPopup(
`<div class="card" style="width: 15rem;">\n` +
` <h6 class="card-header">Name place:<br>${place.fields.name}</h6>\n` +
` <div class="card-body">\n` +
` <p class="card-text" style="overflow: scroll">Place comment:<br>${place.fields.comment}</p>\n` +
` </div>\n` +
`</div>`
).addTo(map)
};
This works well on google chrome, but it doesn't work on safari. When I click on the marker in safari nothing happens
This is a bug of Leaflet 1.7.1, see Leaflet #7255
In the newest master version of leaflet it is working, see Issue Comment
So I recommand to change your leaflet-src from the Leaflet Release 1.7.1 to the master branch on Github
If for some reason you have to stick to 1.7.1 and you do not need to handle the 'taphold' event, initiating the map with tap: false might solve this issue for you.
(As suggested here https://github.com/Leaflet/Leaflet/issues/7331#issuecomment-742454380)