Mapbox 地图没有填充整个 div，即使使用 map.resize() 调用

Question

我的网站上有高尔夫球场位置的 Mapbox 地图。

这是一个示例页面，向下滚动以查看地图： https://www.golfscout.net/golf-course/harborside-international-golf-center-port-course-chicago-illinois

问题：在 Chrome 桌面上，地图经常（并非总是）只显示 div 的一半空间，使其看起来被切断了。这是它的截图： https://www.golfscout.net/images/mapbox-half-map.jpg

这是使用 Mapbox GL JS v2.13.0.

我以为地图重新加载调用会修复它，但它没有：

map.on('load', function () {
    map.resize();
});

它通常在 Safari 和 Firefox 上似乎工作正常。有任何想法吗？谢谢！

这是完整的地图代码：

mapboxgl.accessToken = '<token>';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-87.588567551718, 41.694580079560],
    zoom: 10
});

const marker = new mapboxgl.Marker()
    .setLngLat([-87.588567551718, 41.694580079560])
    .addTo(map);

map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.NavigationControl());

map.on('load', function () {
    map.resize();
});