map.resize() renders a blurry map

mapbox-gl-js version:

Question

I am trying to adjust the height of the map to be full height. Or any fixed height, really. Apparently calling map.resize() does that. And it does. Except that the map quality is affected, like when you set an image element to a bigger size than originally. It looks blurry. Just compare the first image (with the issue I'm mentioning) with second one (full screen version). Just open them in a new tab to clearly see the difference.

Blurry

Original

On the second image (full screen) you can see how the text looks much crispier, while on the first it looks slightly blurry. This only happens when map.resize() is called.

<style type="text/css">
	#map {
		height: 100%;
	}	
</style>

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

<script type="text/javascript">
	const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [51.43, 6.76],
        zoom: 9
    });
</script>

I have also tried using the following styles instead of resizing:
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

But the map wouldn't fit the container.

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#resize

Reproduce the reported blur using the HTML, CSS, and map.resize() example in the issue, then compare it with the alternative container styles and the linked resize documentation. Trace the resize behavior in the mapbox-gl-js rendering path. Done means resizing to a fixed or full-height container preserves crisp map text and imagery without breaking container fitting.