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 and bottom of the svg. Has anyone else come across this and have you been able to fix it? Using some simple svg code such as:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>

On ipad/iphone if I put a border on the svg there strange space above and below the svg...??

fiddle goodness looks normal on desktop but if you look at it on an ipad etc you'll see the issues.

http://jsfiddle.net/InVAMPED/hck5gg1a/

Answer 1

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 2

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