32

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.

6
  • I'm still trying to understand what it is that you want. I have pared down your example to what is (hopefully) a far simpler test case: phrogz.net/SVG/find-a-room.xhtml If this file shows your problem, please describe what you wanted to see, and what you are seeing instead (and what OS/browser/version) you are seeing this with.
    – Phrogz
    Sep 28, 2011 at 16:12
  • 2
    OK, the issue I have appears in all versions of Webkit (so, that's Safari OS X and Windows, Safari Mobile on iOS, Chrome OS X and Windows). The issue is that although the SVG displays at the correct size (its' height being determined in ratio to the width, and as its' container is set in percentages is scales nicely and infinitely) its' height is not reported correctly which causes the container the SVG sits in to be taller than the displayed SVG.
    – Barry
    Sep 29, 2011 at 8:20
  • Logically, HTML defines the height of the container by the content within; unless expressly constrained by the designer. Therefore, the height of the SVG container (in the example above <section id="campus">) should be the same as the height of the displayed SVG.
    – Barry
    Sep 29, 2011 at 8:21
  • Using the Safari Develop tools to inspect the SVG, the current width of of my browser screen the dimensions of the SVG are 516x1075px. You can see with your eyes that the SVG is not taller than its' width. The height of the SVG at width 516px is 526px (original height 288px / original width 282px * current width 516 = 526px) and this is the size the SVG displays at. But because that height value is inaccurately calculated <section id="campus"> thinks its' height should be 1075, hence the green areas.
    – Barry
    Sep 29, 2011 at 8:22
  • The following Javascript/JQuery code fixes the issue. function fixWebkitHeightBug(){ /* Resize campus element */ var campusW = 282; var campusH = 288; var curCampusW = $('#campus').width(); var newCampusH = heightInRatio(campusH,campusW,curCampusW); $('#campus').height(newCampusH); function heightInRatio(oH,oW,nW){ return (oH / oW * nW); } } $(window).resize(function() { fixWebkitHeightBug(); }); $(document).ready(function() { fixWebkitHeightBug(); });
    – Barry
    Sep 29, 2011 at 8:22

9 Answers 9

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

3
  • 1
    I'd add that this bug incorrectly calculates both the width and height of an SVG. That is, with no height or max-height defined, the auto height will be miscalculated and with no width or max-width defined, the auto width will be miscalculated. In my case and when using absolute positioning, setting a max-height/width to a percentage may not work in which case you can just use an extremely large px or em size. In my case, I have 1000em, much larger than any SVG should be.
    – curiouser
    May 31, 2014 at 18:40
  • In my case I need to add max-width:100%; as well, thanks! Dec 15, 2016 at 15:17
  • Interestingly I had an SVG with width, height, viewBox, and preserveAspectRatio presentation attributes and the max-width: 100% was causing it to break the aspect ratio and have a smaller width. Removing max-width was what fixed it for me.
    – steinybot
    May 4, 2021 at 6:33
4

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"
2
  • but then your image box will not be of required size. it will stretch to the container. e.g., if your image width is 100px but the container is 200px it will fill up the container which is unreasonable.
    – zavr
    Sep 3, 2019 at 11:52
  • You could add a div wrapper that sizes your SVG properly
    – martin
    Jul 19, 2021 at 15:01
1

I just set the height to a very large size in the svg to maintain the aspect ratio. Using 100% comes with too many problems. This works better for me because I did not want to use js.

Full props to: http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/

width="1200" height="235.5"

0
0

It's hard for me to understand exactly what you want with your example, or what is not as you intend it. However, in general, if you are using a layout with percentage widths and height containers and you want content to fill those containers, you need to take them out of the flow (using position:absolute on the content and position:relative or position:absolute on the containers).

Here's a simple example that works find in Chrome and Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

The #foo div has its height and width as a percentage of the body. It has a red background that will never be seen because the SVG is position:absolute inside it and set to fill it completely, and have a green background. If you ever see red, it is an error.

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }
<div id="foo"><svg ...></svg></div>
4
  • Thanks for you reply, and the time you put in on the example. That's not the behaviour I'm looking for though. You are defining the size of the container then having the SVG scale to that. I need the size of the container to be controlled by the size of the SVG, which is why the faulty calculation of the SVG height mucks things up. In my example you can see the area of the SVG, the width of the containers always matches the width of the SVG, but the height is completely wrong; which is why I think it may be a bug. Thanks, Barry
    – Barry
    Sep 28, 2011 at 9:36
  • Thank you for clarifying. So you and the SVG's to have a size based on the viewport percentage, and move their containers exactly? I'll create an example for that. I'm not sure how this is different (in the end result) from what I have created, but hopefully it will help.
    – Phrogz
    Sep 28, 2011 at 12:20
  • I made a work around for this problem using JQuery. On window.resize I grab the width of the container then run this formula (original height / original width * current width) which gives me the height in ratio for the current SVG width and set the container height to this value. It's not great having to fix rendering issues with JQuery, but, it works :)
    – Barry
    Sep 28, 2011 at 15:28
  • I agree: using scripting is not the right way to fix this problem (whatever it is). I have added a comment to your question above in an attempt to help you pare this down to a simple test case. If you can clearly convey what you want to occur (and especially if you can pare it down more than I have) we can very likely solve your problem without JavaScript.
    – Phrogz
    Sep 28, 2011 at 16:24
0

This is a known issue that has been fixed by the Chromium team with version 15.0.874.121. I verified this fix myself just today.

http://code.google.com/p/chromium/issues/detail?id=98951#c27

1
  • So that will make its way into the Webkit nightly builds & then production? I hope it's a fix, would make life much easier :-)
    – Barry
    Nov 21, 2011 at 17:10
0

i know how to fix it, you have just to put this at the begining of your svg file: "preserveAspectRatio="xMinYMin none" it must be into svg tag like this:

Problem will be fix

1
  • 2
    I'm certain that I tried that before I even posted here. The aspect ratio isn't the problem as such, it's the mis-reporting of the height that causes the trouble. The answer to the problem is JQuery, as I've written here: brichards.co.uk/blog/webkit-svg-height-bug-workaround
    – Barry
    Feb 21, 2012 at 10:01
0

As previously pointed out WebKit's scaling of SVG improved recently. It is still quite broken in the current Safari (version 5.1, WebKit 534), in my opinion. I did a few experiments and recorded my findings on my website: http://www.vlado-do.de/svg_test/ In short: embedding svg with <object> works under most conditions in WebKit 535. For older WebKit I embed it in an <img> tag. That's fine if you don't want links inside your svg (but it does not work in older Gecko and strangely also is problematic in current Chromium).

0
0

I found that adding "position: absolute;" to the image element (if it's within a parent that's also absolutely positioned), which had my .svg being called, made the "height: 100%;" declaration become relative to its container instead of the page/browser/device.

Tested this on both Chrome and Safari (mobile webkit) for iOS 7.1, and it fixed my problem (the .svg file was going way outside of its container).

Hopefully this a somewhat reliable fix for others here who were having trouble. Worth a shot?

0

I was having a problem with Javascript returning incorrect "height" values for SVGs, and I found the solution was simply to run my script (the bit that needed to access the height) on window.load rather than document.ready.

document.ready fires when the DOM is ready, but images have not necessarily been rendered at this point. At the point where window.load fires, images will have been loaded (and thus the browser will be able to access their dimensions correctly).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.