I have some responsive inline SVGs I made. Their sizes render as I want them to in Chrome, Firefox and Edge, but in Safari they escape their containers/are cut off. For some reason their containers doesn't stretch to accommodate them. The following screenshot demonstrates the unwanted, cut-off Safari rendering:
There are known issues with SVG rendering in Safari, and I have tried all the fixes out there I have found to the best of my ability (here, here, here, and here), but I can't manage to make the containers fit the SVGs in Safari. It is in part because things are a little complicated with my javascript and I'm still a beginner, forgive me if my codepen is a bit messy.
This is my codepen. :http://codepen.io/ihatecoding/pen/Bzgqqa
What my jquery does: it makes SVGs as large as possible until they take up 1/3 of the screen height, at that point it won't let them get taller.
To help you focus on what matters :
- The SVGs are all of class
.areaSVG - The SVG parents/containers are always
.ey-col-svg - The entire footer is
#indexFooter - The main background image that is supposed to resize according to the height of the landing footer is
#section0img
The current version that is working the best has the following format for the svg container:
.ey-col-svg {
display: block;
max-height: calc(30vh - 1vw - 63px);
text-align: center;
box-sizing: content-box;
padding: 0;
margin: -2vh 0 0 0;
}
This is the css for the SVGs before the javascript makes them visible and adjusts their height:
.areaSVG {
overflow: visible;
display: none;
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
}
Again, to repeat The javascript I have currently implemented adjusts the height of the SVGs (whose class is areaSVG).
This is the most relevant part of my jQuery script; it controls the size of the the SVGs. As I mentioned above, this script makes the SVGs as large as possible until they take up 1/3 of the screen height, and at that point it won't let them get taller:
function resizeSVG() {
// the row
var $linksRow = $('.ey-nav-bar');
// the text
var $areaText = $('.ey-text-content');
//the entire row below "research Area"
// the actual svg container
var $area = $('.areaSVG');
var scale = 0.6;
//the wrapper containing the svg div, its height and its width
var $eyCol = $(".ey-col-svg");
var eyWidth = $eyCol.width();
var eyHeight = $eyCol.height();
//the window
var winHeight = $(window).height();
var winWidth = $(window).width();
//max Height caclulated based on window
var maxHeight = .33 * winHeight;
// if the height of the column is less than the width, and below the max height
if (eyHeight < eyWidth && eyHeight < maxHeight)
//make the height of the svg the max heihgt
$area.height(maxHeight);
// use the scaling factor times the width of the svg wrapper
var imageWidth = scale * $eyCol.width();
// get the hight of the column
var imageHeight = $eyCol.height();
// will be the dimensions used to size lenth and width of the svg
var tot;
//apsect ratio of the screen (horizontal/vertical)
var ratio = winWidth / winHeight;
// if the screen is landscape or if the user has left the landing section
tot = imageWidth > imageHeight ? imageHeight: imageWidth;
maxTextHeight = maxHeight * .07;
maxTotHeight = maxHeight * .5;
if (tot < maxTotHeight)
{ $area.css("height", tot);
}
else
{
$area.css("height", maxTotHeight);
$areaText.css("height", maxTextHeight);
}
minLinksHeight = maxHeight * .8;
var linksHeight = $linksRow.height();
}
(Note: the resulting SVG heights are subsequently used by another function, not seen here, to control the size of the main image).
This is my introductory formatting code for each inline svg:
<svg class="areaSVG notFixed index" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Any help would be very appreciated, I really would like to see this to render properly in Safari!
