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

AmeliaBR is entirely right, a big thanks for leading me in the right direction!

Here's what google showed me: The padding-bottom hack

Because a percentage value for padding-bottom gets it's height from the width of the element and not the height itself we can leverage this to create responsive elements without a specified height.

On the SVG container:

.container {
    padding-bottom: 70%; /*this is your height/width ratio*/
    height: 0;
  }

On the SVG element itself:

.container svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Answer 2

I use this media query for targeting ONLY safari browsers and works with svg height.

@supports (-webkit-backdrop-filter: blur(1px)) {
  svg {
    height: intrinsic;
  }
}

Answer 3

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.

Answer 4

The problem is that you are only setting width, not height of the SVG layout box. The viewBox is then being fit inside this layout box using the default xMidYMid meet setting, which scales it just to fit in the more constrained dimension and centers it in the other direction.

Firefox and the latest versions of Chrome (and I guess desktop Safari as well) will scale the SVG to match the viewBox aspect ratio when you leave one dimension as auto. However, other browsers will apply a default height/width, and then scale the image to fit:

• IE applies the 150px height/300px width that is the default for embedded objects.
• Safari mobile must be applying the old webkit default of 100vh (the height of the browser window).

It's not really a "bug" in the browsers, just a feature that was never clearly defined in the specifications.

Search for information about the "padding bottom aspect ratio hack" for a way of forcing the browser to respect an aspect ratio while still allowing the width to be responsive.

Answer 5

For me, setting the width and height to 100% to all svgs did the trick:

svg {
    width: 100%;
    height: 100%;
}

Feels a lot cleaner than the padding hack.