title: SVG height incorrectly calculated in Webkit browsers
body: <p>I have a issue specific to Webkit browsers (Safari &amp; Chrome, on Mac &amp; PC).</p>
  
  <p>I'm using Raphael JS to render SVG data and using a responsive layout to scale the SVGs with the browser window. The SVGs are set to 100% width/height using JQuery. The containing elements have their widths set in percentages to maintain the ratios of the layout as the page resizes.</p>
  
  <p>Trouble is Webkit doesn't calculate the height correctly, it adds extra pixels (sometimes hundreds) around the SVG image; which breaks the layout.</p>
  
  <p>If you open the following link in a Webkit browser you'll see the green extra pixel areas. If you use the developer inpspector in safari you'll see the reported size for the SVG is bigger than the SVG displayed.</p>
  
  <p><a href="http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html" rel="noreferrer">http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html</a></p>
  
  <p>If you open the link in Firefox or Opera you'll see the layout as it should work (the green here is caused by margins I have deliberately set).</p>
  
  <p>IE8 was having a similar problem which using height:auto fixed, but this won't work in Webkit.</p>
  
  <p>Has anybody else had this problem? Anybody have a solution?</p>
  
  <p>I think it may be a Webkit bug (checked the nightly build already, issue persists), but before I log it I thought check to make sure nobody else has a solution first.</p>