Question

See the problem in action: http://jsfiddle.net/krtGd/1/

I have an embedded SVG element in a floating div, something like this:

<div style="float: left;">
    <svg width="50" height="20" id="svg1">           
    </svg>
</div>

This works fine; the div fits as expected around the SVG. However, when I resize the SVG with JavaScript, like so:

$('#svg2').attr('width', 50);

…the SVG resizes properly, but the box around it doesn’t. As you can see in the jsFiddle, the same thing is true if the containing div has display:inline-block instead of a float style.

The weird thing here, and what’s convincing me that this is a reflow problem and not a simple layout problem, is that if you inspect the either of the problem elements in the Chrome console Elements Panel, the div elements resize correctly. This problem may only apply to Google Chrome – I’m seeing it in Chrome OSX v.20.0.1132.57, but not in Safari. I haven’t tested in FF or IE.

So: How can I force reflow in Chrome?

I have tried the usual suspects, including inspecting div.offsetHeight, svg.getBBox(), and several other variants.

Answer 1

Sounds like a bug in Chromium. When the intrinsic width/height of an svg element change, the layout width/height aren’t automatically changing. You can manually set the layout width/height though: .css("width", "50px"). Have you considered filing a bug with Chromium?