Map component only partially displaying layer: React Map GL 3.X to 5.X upgrade

Question

I have attempted to update my react map gl from 3.x to 5.x and it is very glitchy.

Related github issue with gif displaying the map glitch: https://github.com/uber/react-map-gl/issues/836

The interactive area of the map takes up the same amount of the viewport, but only a portion of the background layer is shown.

I can't find any change logs/release notes, and there are no errors in the console, so a little hard to figure out if it is some library API change is the source of the weirdness. It might be a new incompatibility between the react-map-gl library and the raster-tile-style library I am using to render the background layer.

Essentially looking for any debugging tips from the masses as I dive back into this...

Update: Switched out our custom MapStyle for the regular mapbox token API. As you can see, the map div (with attribution) is in the correct positioning but still only the top-left of the map content is actually displayed...

Update 2: latest plot twist: The glitch doesn't show up in firefox, (originally present in chrome) Of course, the mapbox layer works fine but when I use our mapStyle in a dev environment, it blocks the map tile requests because of CORS

Answer 1

Ooook, looks like I just needed to force the viewport to be "100%" for width and height

Was somewhat inspired by this (practically unrelated) issue to try the above, just because it was mentioned as a API change in v4.x

react-map-gl issue #675