Leaflet maps shifted when inserted into Box

[devleaks]

Hello,

I'm building a dashboard-like ui and added a leaflet map in a Box. Unfortunately, all layers above the map are "shifted" by ½ div width and ½ div height. (I've tried with other layers than marker or geojson, they are shifted as well.)

Any clue where this might come from?

I made a vue sandbox here.

When you start the sandbox, there should be a marker in the middle of the map. The marker is actually in at position 0,0 on the div (instead of the center) and you don't see it. The orange polygon should cover the airfield in the lower right part of the screen.

If you "zoom out" by clicking the - icon, you will actually see the marker moving to the center of the map, and the polygon will shift and cover the small airport.

If you simply replace the tag with plain

, the overlays are not shifted.

Any idea where this might come from?

Thanks.

Best regards.

[dattn]

Your sandbox does not work for me, the result is a blank page. Can you please fix it, so i can take a look at your problem.

[devleaks]

Which browser/os? I just tested on Safari, Chrome and Firefox on OSX 10.10 and 10.13 and they all work. I also tested ios 11.4 on iPad and also works. I don't have any Window box around. I can provide screen dumps if you wish.