My map keeps shaking when I move it

Hello, my map seems to shake a lot when I use width: 100% (or any percentage)

With px, it works just fine. I want to make the width the whole screen though.

Here’s a video of the shaking:

https://user-images.githubusercontent.com/49425409/153725273-faaec144-cee5-45a2-aff0-4af452fadeee.mp4

In the video the width is 90%

This is the part of the HTML:

<div id="mapContainer" style="width:100%;height:100%; position: relative;">
    <div id="map" style="width: 90%; height: 500px; left: 50%; bottom: 50%; transform: translate(-50%, 50%);">
      <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
    </div>

Thanks in advance, Jees

[Falke-Design]

When I added additionally a TileLayer the shaking doesn’t happen anymore. Same if I removed L.mapboxGL completely.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map).

I don’t know mapbox, but it looks like this is an mapbox error and can’t be fixed in Leaflet. Also I suggest to update the mapbox-gl-js version. You are using 1.13.2 but the newest version is 2.7.0. https://cdn.maptiler.com/mapbox-gl-js/v1.13.2/mapbox-gl.js

[IvanSanchez]

The basemap is a L.mapboxGL one. To consider this as a Leaflet bug, this should be reproducible with a plain L.TileLayer.