Responsive svg not getting full width in safari

Question

I have a svg that should be 100% width of the body, and it works in ie11, chrome and firefox - but in safari there's some space at both sides of the svg and I cannot get rid of it. Any help appreciated - see the fiddle here: http://jsfiddle.net/tbbtester/2apEh/

The css:

body{margin:0;padding:0;background:orange;}
.top {position: absolute;width: 100%;}
.inner{height:0;position: relative;padding-top:3.2%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:teal;}

The markup:

    <div class="top">
        <div class="inner">
            <svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid meet">
                <rect x="0" y="0" height="3.2" width="100"/>
            </svg>
        </div>
    </div>

score 12 · Accepted Answer · edited May 23 '17 at 12:16

12

On referring to this

Previous SO question

it seems that this

preserveAspectRatio="xMidYMid meet"

is the issue.

If you change it to

preserveAspectRatio="none"

the problem is solved

JSfiddle Demo

edited May 23 '17 at 12:16

Community

1
1

answered Jun 19 '14 at 09:43

Paulie_D

107,962
13
142
161

score 0 · Answer 2 · answered Jun 19 '14 at 09:52

preserveAspectRatio attribute can have 3 different kind of value meet slice none. Check the DEMO.

so if you use

<svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid none">

instead of

<svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid meet">

you problem might solve.

score 0 · Answer 3 · answered Aug 02 '22 at 22:39

0

Adding a set width and height of 100% on the SVG element fixed it on Safari for me.

answered Aug 02 '22 at 22:39

parker_codes

3,267
1
19
27

Responsive svg not getting full width in safari

3 Answers3