SVG viewbox height issue on ios Safari

Question

I have noticed a strange thing on ios when using svg. The svgs seem to work fine in all other browsers, but on Safari ipad/iphone the viewbox has some weird space at the top

Answer 1

This worked for me:

.mapContainer svg{
  max-height: 60vw; /* This will depend on the aspect ratio */
}

You need to set the max-height (in vw units) such that the svg is within bounds. Then it scales nicely everywhere. Note that the max-height will be different for different SVGs, depending on the aspect ratio.