SVG Height Larger in Safari

Question

Been working on a site for quite a while and almost have it done. I am now mainly dealing with an SVG issue in Safari & Chrome (webkit based browsers). When I load the SVG on the homepage there it is larger than in Firefox and IE. This causes the image (head of the hat man) to slightly be cut off or hidden as it is displayed as larger image than in Firefox for example. Safari screenshot:

SVG In Safari 6.0.5

Firefox screenshot:

SVG In Firefox 22

I found this thread on SO. There they suggested to use:

svg { max-height: 100%; }

This CSS change as it is on the site:

.hatman {
    position: absolute;
    bottom: 15px;
    left: 50px;
    right: 30%;
}

.hatman .hatman-slide {
    height: 100%;
    max-height:100%;/*added as suggested */
    width: 100%;
}
.hatman #profile {
    position:absolute;
    left: 0px;
    }
.hatman #hat {
    opacity: 0;
}

That did however not work for me. The answer was not accepted by the OP either. Another similar issues is described at SO here, but no answer yet either. Has anyone a suggestion how to fix this?

*sidenote:* `right: 30%;` in `.hatman` has no effect – Raptor Aug 01 '13 at 05:40 — Raptor, Aug 01 '13 at 05:40

score 0 · Accepted Answer · answered Aug 13 '13 at 04:54

In the end this was more an issue with Webkit dealing with the SVG resizing.

This JavaScript was used to fix the max height issue

    function TSafariFix() {

    jQuery(window).resize(function() {
    TSafariFix_Resize();
    });
    TSafariFix_Resize();
}

jQuery(document).ready(function(){
    Hatman = new THatman();
    SFix = new TSafariFix();
});

SVG Height Larger in Safari

1 Answers1