Why does Chrome clip my height: 100% SVG when I zoom out

Question

Chrome clips my SVG graphics when I zoom out. Firefox and IE 9 don't.

Why does this happen?

Here is a js-fiddle example. There's a <div> with an <svg> inside,
and the height of the <svg> is 100%.
If you zoom out, in Chrome, then you'll notice that the <svg> is truncated, higher and higher above the "Bottom", the more you zoom out.

(How can I avoid it? I'm thinking about remembering the max x and y values and setting the <svg> width explicitly, this seems to work.)

Update:

Now I've found a workaround: Calculate the browser zoom factor and scale up each <svg> with the inverse zoom factor — then they become precisely large enough. Like so:

if ($.browser.webkit) {
  // outerWidth is measured in screen pixels, innerWidth in CSS pixels.
  // So outerWidth / innerWidth is the zoom %.
  var invZoom = (window.innerWidth / window.outerWidth * 100) +'%';
  $('svg').css('width', invZoom).css('height', invZoom);
}

(Here is a thread about calculating the zoom level)

I'm still a bit curious as to why Chrome does this. Is there some issue with screen pixels versus CSS pixels / sizes perhaps.

Update: 2012-02-25

Now the problem is no longer reproducible. Perhaps some related Chrome bug (?) has been fixed.

I think the problem you are facing is due to the outter container having a dynamic size. Assigning the outter div height a rigid size (in pixels) and giving the child elements dynamic sizes (% values), will give you what you want. — AnchovyLegend, Jun 18 '12 at 19:32

score 1 · Answer 1 · answered Jun 20 '12 at 14:15

I had a similar problem with SVG for a responsive design I was working on. I ended up removing the height and width attributes on the SVG element, and setting them via CSS instead. There is also a viewBox attribute on my SVG element and preserveAspectRatio="xMidYMin meet". With that setup I was able to have an SVG element that resizes dynamically based on viewport size.

Why does Chrome clip my height: 100% SVG when I zoom out

1 Answers1