Popup does not open when clicking on marker safari

Question

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

Answer 1

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

Answer 2

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)