SVG image renders at incorrect size in Mac Safari after hover image replace

Question

Please see the fiddle: http://jsfiddle.net/deshg/8q1pkcna/5/ which shows a much simplified img hover effect. It replaces the src of the svg img on mouseenter/mouseleave and the size of the img is specifically defined in the CSS (code below).

This works as expected on all browsers except for Mac Safari 7 which makes the original SVG img much smaller when it replaces it after hovering (when you mouseleave). It reports the image as the correct size but displays it much smaller so i originally thought it was an svg viewbox issue or something in this regard however i have tried changing the viewbox and preserveAspectRatio values with no effect. Plus the svg displays correctly initially so it doesn't make sense that there would be a problem with the actual svg files.

I want to avoid having to to edit the svg files manually if at all possible as it will make it much more difficult for normal users adding SVGs but i don't think they are the problem anyway.

Can anyone shed any light on why on earth this is happening and how to fix it as it's a very strange issue!

FYI there is another thread at SVG resizes on hover in safari only which covers a similar topic but with no answers or links to reported bugs.

Thanks so much!

<div id="container">
    <img src="https://dl.dropboxusercontent.com/s/3o4xrlvax9b08u4/svghover.svg" class="svghover">
</div>

#container {
 width: 100%; background-color: #000000; 
}

img {
width: 100px;
height: 100px;
}

$(document).on({
mouseenter: function () {
    var t = $(this);
    t.attr("src", function(index, attr){
        var src = t.attr("src");
        return attr.replace(src, "https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg");
    });
},
mouseleave: function () {
    var t = $(this);
    t.attr("src", function(index, attr){
        var src = t.attr("src");
        return attr.replace(src, "https://dl.dropboxusercontent.com/s/3o4xrlvax9b08u4/svghover.svg");
    });
}
}, "img.svghover");

Answer 1

I just ran across your question here, and I don't know if it still matters to you, but...

I ran into a similar situation. I was replacing the contents of the image not based on mouse hover, but some other complex conditions. Anyway, I had the same problem: incorrect sizing of the image.

I was able to solve it by not using an img tag, but using a div with an object instead. Then when I need to replace the SVG, I replace the entire object. I don't know if this will work for what you're trying to do, but it may be worth a try. Here's a simple example of using object to embed an SVG file:

<object data="my_file.svg" type="image/svg+xml"></object>

Answer 2

What I did is remove the Image and the reset it. This is not the best solution but it works.

var clone = $("img#unique").clone();
clone.attr("src", "newSrc");
$("img#unique").remove(); 
clone.appendTo($("img#unique").parent());