Leaflet.js调用fitBounds()后图片叠加层定位异常，需窗口重绘恢复

我用Leaflet.js结合CRS.Simple在非地理地图上添加了图片叠加层。调用map.fitBounds(bounds)后，图片叠加层初始时大部分显示在屏幕外，但调整浏览器窗口大小（触发重绘）后，它会恢复到预期位置。

操作步骤 #

生成地图的代码如下：

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);

预期结果 #

整个平面图图片显示在屏幕上并填满地图区域。

实际结果 #

平面图初始时大部分在屏幕外，但调整浏览器窗口大小后会回到预期位置（已在Firefox和Chrome测试）。

初始状态图片叠加层在屏幕外：

窗口调整后图片叠加层状态：

我可以通过手动触发窗口resize事件临时解决：

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

但我怀疑自己操作有误，可能是对坐标系理解错误，或是页面其他CSS造成干扰。我注意到两种状态的区别是：调整窗口后，带有leaflet-pane和leaflet-map-pane类的div会添加3D CSS变换：transform: translate3d(530px, 248px, 0px);

请问我哪里操作错了？

内容的提问来源于stack exchange，提问作者benfrancis