map.resize() renders a blurry map

[kpagcha]

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

[SnailBones]

@kpagcha Can you try addingposition:absolute in addition to calling map.resize()?

I'm able to reproduce this here, it seems that when the map is using relative CSS position ,calling map.resize() shifts the map, presumably into non-integer pixel values. The map moves and gets taller in all versions, but the blur seems to be introduced in v2.5.0, maybe by #10936.

cc @avpeery

[kpagcha]

The issue appears to remain even with position: absolute.

Also that relies on having a relative parent with a set height. I'd rather not mess with any HTML other than the container.

[kpagcha]

I have found this happens when an ascendant has margin. The second map is within a div with left margin, and the rendered map has noticeably blurry text while the first one looks crispy. You can reproduce the following or compare the images below:

<style type="text/css">
	#main {
		margin-left: 5px;
	}

	.map {
		height: 400px;
		margin: 20px 0;
	}
</style>

<div id="map1" class="map"></div>
<div id="main">
	<div id="map2" class="map"></div>
</div>

<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibGVhZ3VlbG9ic3RlciIsImEiOiJjbDM0aXZnaDIxM3ZxM2lyeG5lbW02YW9uIn0.fkj15tmRjgVfO4d42pciyw';
	let map1 = new mapboxgl.Map({
		container: 'map1',
		style: 'mapbox://styles/mapbox/streets-v11',
		bounds: [[-74.5, 40], [-74.5, 42]]
	});
	let map2 = new mapboxgl.Map({
		container: 'map2',
		style: 'mapbox://styles/mapbox/streets-v11',
		bounds: [[-74.5, 40], [-74.5, 42]]
	});
</script>

Note that the blur appears to get worse starting at under 50px. Over 50px it starts looking better, but I haven't identified a pattern. Removing the margin and then calling map.resize() fixes the issue.

This doesn't only happen when the container has a margin. It is also happening to me in other cases that I am trying to reproduce but it's definitely a problem with the map.resize() function.

[kpagcha]

Any development on this?

[uvtzxpm]

This bug is keeping me stuck on v2.4.0, the blurriness looks very bad in my use case. I would like to be on a recent version.

Any updates? 🙏