Canvas width/height don't update when container's width/height are changed

[dlbnco]

Description

After upgrading to v7, I noticed this behavior in my application which has maps displayed in different dimensions that often change.

Map with initial size

When a map container changes it's width/height, the underlying canvas that actually renders the map does not update to follow the change, resulting in a incorrectly sized render.

Map with new size and outdated canvas

If the browser window is resized, then the canvas will update as expected.

Map with corrected canvas after browser window resize

Expected Behavior

The underlying canvas should follow container dimension changes immediately.

Steps to Reproduce

This is reproducible in any of the hosted lib examples, e.g.: https://visgl.github.io/react-map-gl/examples/controls

1. In your browser develop tools, search for the element that has the following class: container padding-top--md padding-bottom--lg
2. Change the max-width to unset — this will increase the element's width
3. Notice that the map won't fill the new width immediately;
4. Resize your browser window and observe the map now resizing as expected.

Environment

• Framework version: 7.1.7
• Map library: Mapbox
• Browser: Safari/Firefox
• OS: macOS Sonoma

Logs

No response

[dlbnco]

I was able to workaround this by manually calling mapboxgl.Map.resize() inside a useEffect that also gets triggered when those dimensions change. Maybe this is a clue for a solution.

[Pessimistress]

This is not a bug. v7 follows mapbox-gl's own behavior, which does not monitor the resize of your container. You are supposed to call resize yourself.

[dlbnco]

So this kinda falls into this item? (from the Upgrading docs):

All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on Discussion so we can review on a case-by-case basis.

Adding this feature can be considered but I'm also fine with the workaround above. Mentioning it in the documentation could also be helpful—spent quite a lot of time debugging and making sure it was not an issue with my implementation.

You are supposed to call resize yourself.

What explains it fixing itself when the browser window is resized? Is mapbox-gl handling it?

[Pessimistress]

What explains it fixing itself when the browser window is resized? Is mapbox-gl handling it?

Yes. mapbox-gl's trackResize option (default true) adds a listener to window.resize.

[neelduttahere]

I was able to workaround this by manually calling mapboxgl.Map.resize() inside a useEffect that also gets triggered when those dimensions change. Maybe this is a clue for a solution.

Hey @dlbnco can you elaborate? mapbox-gl.Map does not seem to be exporting resize(), how were you able to work around this?

[Pessimistress]

@neelduttahere MapRef.resize()

https://visgl.github.io/react-map-gl/docs/api-reference/map#methods

[dannykennedy]

@neelduttahere MapRef.resize()

https://visgl.github.io/react-map-gl/docs/api-reference/map#methods

?