SVG height incorrectly calculated in Webkit browsers

Question

I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).

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.

Trouble is Webkit doesn't calculate the height correctly, it adds extra pixels (sometimes hundreds) around the SVG image; which breaks the layout.

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.

http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html

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).

IE8 was having a similar problem which using height:auto fixed, but this won't work in Webkit.

Has anybody else had this problem? Anybody have a solution?

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.

Answer 1

svg { max-height: 100%; } 

WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489

I also added the workaround to the bug tracker.

Answer 2

I had a similar problem for Safari. Case was that the svg width and height were rendered as dom element attributes (in my case width="588.75px" height="130px"). Defining width and height in css could not overwrite this dimension setting.

To fix this for Safari I removed the width and height information from the SVG file while keeping viewBox intact (you can edit .svg files with any text editor).

Git diff snippet of my .svg file:

    xmlns:svg="http://www.w3.org/2000/svg"     xmlns="http://www.w3.org/2000/svg"     viewBox="0 0 588.75 130" -   height="130" -   width="588.75"     xml:space="preserve"     version="1.1"