I have a div that contains several elements as children
<div id="container">
<div id="map"></div>
<div id="el1"></div>
<div id="el2"></div>
...
</div>
The container div is set to be a certain size, 400px x 600px, and then a transform scale function is applied when the window is resized. This way everything maintains its aspect ratio and all text in the children stays appropriately scaled.
This issue comes to the map tile size. They are set at 512px but are being scaled by this transform which causes tile gaps and blurriness. I used map.invalidateSize() but the issue is it still sees the containers height as it's original value. For example say it had it set to 100% height and width of its parent. Before and after the scale is applied, the height and width values both read 400 and 600 which means .invalidateSize() is calculating off this, rather than the scaled value. In the leaflet docs the function getScale() is mentioned, could this work somehow? Is there a way to pass the map its scaled containers width and height? I want obviously the tiles to be be 512 no matter the size of its container's scale
TLDR: Using a scale transform on the container of a leaflet map makes it miscalculate its width and height
