jQuery Forum

If you’re hiding your map initially with something like display:none and showing it dynamically with JavaScript, it may have some problems appearing and sizing correctly. The map can’t figure out its own size when it’s hidden from the page, since it doesn’t have a size in the browser’s calculation.

With Mapbox GL JS you can call map.resize() to detect and resize the map 

1. 1: $(map).trigger('resize');
2. 2: $(window.map).trigger('resize');
3. as well as
4. 3: $(window).trigger('resize');