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%;
}