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 th

Answer 1

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?