Mapbox Leaflet zoom does not work from the center

Question

Problem

I use Mapbox (Leaflet) on a site https://upplevelsekartan.com/djurparker (click Karta). When zooming in it does not zoom in from the middle, but from the upper left corner.

In isolation

The example below uses the exact same code as my site, but this example works as expected. Too see it, run in Full page. When zooming it zooms from the center like it should.

Question

Why does it work perfectly in isolation, but not on my site? How can I fix it?

 window.addEventListener('DOMContentLoaded', async() => { await import('https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'); mapboxgl.accessToken = 'pk.eyJ1IjoiamVuc3Rvcm5lbGwiLCJhIjoiY2tjb290djIwMG5kZzJzbG1zNGsxeWZ6OSJ9.85qNaU7Xm5Cs2i2yK5tVCw'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', }); map.fitBounds([ // Sweden [11.0273686052, 55.3617373725], [23.9033785336, 69.1062472602] ], {padding: 16}); map.on('load', () => { }); }, false );

 div { height: 300px; width: 300px; }

 <div id="map"></div>

Answer 1

If you change

.mapboxgl-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

to

.mapboxgl-canvas {
  position: relative;
  left: 0;
  top: 0;
}

it should fix your issue.