CODEWITHSUNDEEP
htmlcssfirefoxsvgscaling
Glynne McReynolds
Glynne McReynolds

Reputation: 560

Why does my SVG not scale properly in Firefox?

Okay I've been banging my head against this one for a few hours, so now it's time to throw it on here and see if anyone can help:

The basic problem is that I've got an SVG on an html page, that's styled to be responsive, and adjust to the width of the browser window. The code works perfectly fine in both IE and Chrome, but on Firefox when the window gets smaller than a certain size, the SVG stops scaling. It will scale up fine. Just to infuriate me, it also appears that when I 'inspect element' in Firefox, and check out the code, the SVG resizes properly to fit into the now smaller viewing area. Here's some screenshots of what I mean:

SVG working in Chrome

SVG not working in Firefox

SVG in Firefox 'Inspect Element' view

Here's my code, as basic as it is:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Glynne McReynolds</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<header>
    <img src="images/glynne-mcreynolds.svg" alt="Glynne McReynolds" title="Glynne McReynolds">
</header>
</body>
</html>

And the relevant CSS:

header {
    max-width: 500px;
    text-align: center;
    margin: 0px auto;
}
header img {
    width: 100%;
    height: auto%;
}

I should note that I've also included the development build of modernizr.js, but removing it doesn't make any difference, so I left it out.

Things I've tried:

Also here's a fiddle with the code, and here's the SVG. Any help would be much appreciated.

Upvotes: 2

Views: 2684

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Your Firefox screenshot shows that the window is narrower than the browser UI will go (note the cut-off toolbar), so that the viewport is actually ending up wider than the window.

As Robert mentions above, the inability of the UI to shrink past a certain point is often caused by add-ons that add non-flexible elements to the UI....

Upvotes: 2

Related Questions