Javascript 地图框传单缩放无法从中心进行 问题

我在网站上使用地图盒（传单）（单击Karta）。放大时，它不会从中间放大，而是从左上角放大

孤立地 下面的示例使用了与我的站点完全相同的代码，但这个示例的效果与预期的一样。也看到了，全页运行。缩放时，它会从中心进行缩放

问题: 为什么它在隔离环境下工作得很好，但在我的网站上却不行？我怎样才能修好它

window.addEventListener（'DOMContentLoaded'，async（）=>{
等待导入（'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js');
mapboxgl.accessToken='pk.eyj1ijoiamvuc3rvcm5lbgwilchijoi2tjb290djiwmg5kzzjzbg1zngsxewz6osj9.85qNaU7Xm5Cs2i2yK5tVCw'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
});
map.fitBounds（[//瑞典
[11.0273686052, 55.3617373725],
[23.9033785336, 69.1062472602]
]，{padding:16}）；
map.on（'load'，（）=>{
});
}，假）
div{
高度：300px；
宽度：300px；
}
如果您更改

.mapboxgl-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

到

它应该可以解决您的问题。
是的，它解决了！谢谢您知道为什么mapbox会根据位置类型
绝对
或
相对
进行不同的计算吗？我不知道。不，老实说，我不知道。
.mapboxgl-canvas {
  position: relative;
  left: 0;
  top: 0;
}