我使用Leaflet.js和CRS在一个非地理Map上添加了一个图像覆盖。定位很简单。当我调用map.fitToBounds(bounds)时，图像覆盖最初大部分显示在屏幕外，但如果浏览器窗口调整大小（可能触发了回流），它会弹出到预期的位置。
“我所做的”
用于生成Map的相关代码行：

let map = L.map('floorplan', { crs: L.CRS.Simple });
const imageUrl = floorplanUrl;
const imageBounds = [[0, 0], [1000, 1000]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
map.fitBounds(imageBounds);

预期：

整个平面布置图图像显示在屏幕上并填充Map区域。

实际

大多数平面图最初显示在屏幕外，但如果浏览器窗口调整大小，则会移动到预期位置。（在Firefox和Chrome中均已尝试）。
屏幕外显示的图像叠加：

调整浏览器窗口大小后的图像覆盖：

我可以通过手动调度window对象上的resize事件来解决这个问题：

const event = new Event('resize');
window.dispatchEvent(event);

但我怀疑我做错了什么，要么是误解了坐标系，要么是页面上的其他CSS有一些干扰。
我注意到第一种状态和第二种状态之间的区别在于，在第二种状态中，使用类leaflet-pane和leaflet-map-pane将3D CSS转换添加到div中：
transform: translate3d(530px, 248px, 0px);
我哪里做错了？