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">
SVG background-image not scaling properly in Safari
I believe I have figured it out.
After extensive research (& I do mean extensive) I found many tips & tricks & conflicting articles. The issue was in my SVG (were we expecting anything else?).
A past article I read recommended I ensure that I have a viewbox attribute & remove the width & height attributes. While I did need to viewbox attribute I, also, needed the width & height attributes. Further detail can be found in this article here.
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 invisible on Safari without height attribute, but issue not recreatable?
As comments @Evanss
Also height auto doens't make the SVG appear, but height 100% does.
width="22" height="100%"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
Related Topics
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Why Isn't :Nth-Child Working in IE9
Rounding Numbers in SASS and Adjusting the Amount of Decimals
CSS Background-Image Path Issues
CSS Font Differences Between Browsers
How to Fade in Background Image by CSS3 Animation
Svg with Radialgradient Not Work in Browsers
(Css) Make a Background Image Scroll Slower Than Everything Else
CSS Input Field Text Color of Inputted Text
No Padding When Using Overflow: Auto
Bootstrap: Center Some Navbar Items
Using Props to Set '&:Hover' Background-Color
Inherited Text-Decoration Style
How to Make Ie Support Min-Width/Max-Width CSS Properties
Equal Height Children of Grid Items
Height of Flex Item Is Wrong in Safari