LeafletJS rendering with squashed tiles

Question

I'm using LeafletJS to display maps in a number of places on my site.

In most cases, it is working fine, but on one specific page I am getting a weird rendering glitch, which looks like this:

As you can see, the map is rendering with vertical grey bars at each tile boundary. Additionally, if I add markers to the map, they also display squashed.

The weird thing is that I'm using the same code (ie the exact same JS file) to render similar maps on other pages without any problems. I'm also using similar code to render two other maps on the same page, again without problems.

The JS code looks like this:

(function(L) {
    var element = document.querySelector('.details-map');
    if (!element) { return; }
    var coords = element.getAttribute('data-coords');
    var latlng = coords.split(',');
    var location = {lat: parseFloat(latlng[0]), lng: parseFloat(latlng[1])};

    var zoom = element.getAttribute('data-zoom');

    var map = new L.Map(element, {center: location, zoom: zoom, gestureHandling: true});
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
    }).addTo(map);
})(L);

And the associated HTML looks like this:

<div class="details-map" data-coords="51.5216,-0.71998" data-zoom="14"></div>

The rendering glitch occurs at all zoom levels and persists after the doing things like map.invalidateSize() to force a redraw.

Can anyone explain why I'm getting this glitch and how to fix it? Thank you.

Answer 1

After much digging, I finally resolved this.

The problem was some CSS that was linked to an element some distance further up the DOM tree, and not really relevant to the map. It looks like this:

.local-branch img {
    vertical-align: top;
    display: inline-block;
    width: 25%;
    padding: 0 10px;
}

The intention of this CSS is to lay out a set of images related to the branch. The map is being added later as part of the branch details, within the .local-branch element. The styles are obviously not intended to apply to the map, but are applying anyway as the CSS selector is too broad.

I'll need to find a way to fix it that doesn't break the existing image layout, which still needs some thought, but at least I've worked out what was going on, so the mystery is solved.