Svg Height Incorrectly Calculated in Webkit Browsers

Safari not rendering SVGs to the desired size/height (SVGS are clipped)

I figured out a combinations of CSS settings that now make the SVGs Render in entirety in Safari (as well as in Chrome, Firefox, and Edge); Safari no longer clips them/cuts them off. My sizing and calculations are not perfect, but the display settings work, you will need to tweak the size according to your own needs adjusting the height of the SVG container/parent. My javascript (which controls other aspects of the page) are wonky, but the SVG settings are more or less correct. I hope this helps someone.

Here is the codepen: http://codepen.io/ihatecoding/pen/zBgqgp

The inline html declaration of the SVG

I adjusted my viewBox and removed my overflow: visible setting according to the suggestions of @Paul Lebeau Note that the preserveAspectRatio is intentionally not specified because it should remain with the default setting, xMidYMid meet (unlike other Safari SVG fixes which change it to none).

Here is the code:

 <svg class="areaSVG notFixed index" viewBox="0 0 80 80"  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

The CSS

If you are not using my javascript to resize the svgs, use the following css settings for the SVG container (.ey-col-svg) and the SVG itself (.areaSVG):

/* the SVG parent/container */

.ey-col.svg {
    display: block;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}

/* the SVG itself */

.areaSVG {
    display: inline-block;
    max-height: 15vh; 
    box-sizing: content-box;
    margin: 0;
}

Notes about my javascript

If you are using my messy javascript, please note both the container and the SVG will both initially have the setting display: none in the CSS, and then the javascript will change both of them to have the same displays settings I have shown above [with the container (.ey-col-svg) set to display: block and the SVG (.areaSVG) set to display: inline-block].

Also, my javascript in my codepen has changed. It now works better if I adjust the height of the container (.ey-col-svg) instead of the of SVG (.areaSVG) itself. Another option that might work better for users is changing the max-height of the container, instead of the height (as I have done).

SVG pattern image cut off in webkit browsers

Just change the viewbox to "0 0 300 300" and the image width and height to 300 as well, and in SVG you will face a lot of issues related with the viewBox, so for better understanding check this link
https://sarasoueidan.com/blog/svg-coordinate-systems/

SVG Height Larger in Safari

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 scaling issues in Safari

Okay, so the fix was to add preserveAspectRatio="xMinYMin none" to the SVG element.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="35px" height="28px" viewBox="0 0 35 28" enable-background="new 0 0 35 28" xml:space="preserve" preserveAspectRatio="xMinYMin none">

Webkit calculates width of element wrong, resulting in gaps in my layout

It looks to me like it has to do with whether or not the pixel width of the viewport is divisible by 2 or 3. In cases where the width:50% and $(document).width()/2=0 then there is no issue, but when $(document).width()/2=1 then the gap appears.

So instead of calculating the height for each perhaps you can calculate it once and use it each time, i.e. change imageLayout() to:

var aHeight = $('.photos li figure > a')[0].width();
$('.photos li figure > a').each(function(index) {
    console.log('w: ' + $(this).width() + " css w: " + $(this).css("width"));
    console.log('pw: ' + $(this).parent().parent().width() + " css pw: " + $(this).parent().parent().css("width"));
    $(this).height(aHeight);

    if ($(this).attr('data-loaded') != "1") {
        var imgcaption = $(this).parent().find('figcaption a');
        imgcaption.html('<em class="icon-bolt"></em> loading...');
    }

});