When checking my site in IE some elements get rendered "taller" than in other browsers - seemingly with nothing in common that i can find (edit: turned out they all contained svg elements). It's like they have a fixed height even though they don't.
Example in IE: https://ibb.co/gScRD5
In chrome (as expected): https://ibb.co/bPEOt5
(Project is in react with css modules but I've summarised the css that's combined)
The button:
<a href="/kontakta-oss/" className={styles.cta}>
Kontakta oss
<Svg src={chevronSvg} className={styles.ctaChevron} />
</a>
And the its scss:
.cta {
margin-top: 1rem;
margin-left: 1rem;
color: #fff;
background: rgba(64, 142, 180, 0.75);
fill: #fff;
transition: background .1s;
padding: 1rem 2rem;
display: inline-block;
}
.cta-chevron {
width: 1rem;
vertical-align: middle;
display: inline-block;
margin-left: 1rem;
}
Any help is appreciated.
The problem is the <svg> element in your <a>. IE is giving it a height of approximately 150px which is what gives the <a> a larger height.
<svg
xmlns="http://www.w3.org/2000/svg"
id="Capa_1"
viewBox="0 0 238.003 238.003"
x="0px"
y="0px"
xmlns:xml="http://www.w3.org/XML/1998/namespace"
xml:space="preserve"
version="1.1"
>
...
</svg>
If you open F12 Tools in IE and remove the <svg> element then the <a> box is sized correctly.
IE doesn't seem to be correctly inferring the SVG's intrinsic height - you can fix this by adding an explicit height="16px" attribute to the <svg> element, then it will render correctly.
Related
The following code snippet illustrates my problem:
<style>
div {
background-color: #00FF00;
width: 80px;
}
svg {
background-color: #FF0000;
vertical-align: top;
width: 100%;
height: auto; // PROBLEM
}
rect { fill: #0000FF; }
</style>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
preserveAspectRatio="xMidYMid meet"
width="100"
height="100"
>
<rect width="90" height="90" x="5" y="5" />
</svg>
</div>
The SVG should be a red square (with a blue square drawn into it), which scales down with respect the its parent div tag while preserving its aspect ratio. The above example works fine in Firefox, Chrome (for Desktop and Android), Safari and Edge. It renders a 80x80px red square:
Only Internet Explorer 10 and 11 stretch the SVG vertically to about twice its intended height, so 80x160px:
The SVG is scaled to 80x100px if I remove / comment the "height: auto" statement in the stylesheet. Yet, this breaks Chrome, which also scales the SVG to 80x100px in this case. Firefox and Edge seem to be able to deal with removing this statement.
Interestingly, the aspect ratio of polygons etc. in the SVG is always perfectly maintained, check the blue square, while the polygons are usually drawn in the vertical center of the SVG which is being stretched. It's the "SVG-container"/SVG-tag, which causes trouble and consumes more space than it should.
How can I solve this cross-browser?
I built a small JSFiddle to demonstrate the issue.
There is a closely related question entitled "SVGs not scaling properly in IE - has extra space". The key difference is that I do in fact provide a width and a height directly in the svg-tag, which I need to do for Android browser compatibility. IE breaks nevertheless. The canvas-approach described by Paul LeBeau seems to follow different assumptions.
This question is a variation of the following older questions, yet not identical:
Cross browser SVG preserveAspectRatio
SVG in img element proportions not respected in ie9
SVG scaling in Internet Explorer
The following gist is interesting but not helpful either:
Fix SVG in tags not scaling in IE9, IE10, IE11 (it really is about SVGs in img-tags and removing the width and height parameters in the SVG tag does not work for me)
There is an approach called the "padding hack", which is described here:
CSS tricks: How to Scale SVG
Making SVGs Responsive with CSS
This answer is only for reference - I am still looking for a better, less complicated (and less idiotic) way to do this.
Ok, along the lines of the "padding hack", the following seems to work across browsers:
<style>
div#outer {
background-color: #00FF00;
width: 80px;
}
div#container {
position: relative;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 100%; /* 100% * height/width */
}
svg {
background-color: #FF0000;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
rect { fill: #0000FF; }
</style>
<div id="outer">
<div id="container">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
preserveAspectRatio="xMidYMid meet"
width="100"
height="100"
>
<rect width="90" height="90" x="5" y="5" />
</svg>
</div>
</div>
There is also an updated JSFiddle.
Another Solution is the Padding-Bottom Hack (Padding-Bottom: Width/Height*100)
Here an example with responsive svg-clippath and ie11+up support
<svg class="clipper" width="0" height="0">
<defs>
<clipPath id="clippath" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01136364)">
<path d="M78.24,5.09S75.53.46,70.15.46H29.85s-5.38,0-8.09,4.63L1.66,39.37S-1,44,1.66,48.63l20.1,34.28s2.71,4.63,8.09,4.63h40.3s5.38,0,8.09-4.63l20.1-34.28s2.71-4.63,0-9.26Z"></path>
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 88" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 88%; height: 1px; overflow: visible">>
<image xlink:href="http://www.domain.de/image-with-aspect-ratio-100-88.jpg" x="0" y="0" height="100%" width="100%" style="clip-path: url(#clippath);">
</image>
</svg>
I've created an SVG symbol sprite with a bunch of icons in it. When I display them on the page via the <svg><use xlink:href="file.svg#id"></svg method, they aren't being antialiased properly in Chrome or Safari (it looks OK in Firefox). SVGs render nicely when using an <img> tag, however (see screenshot for comparison).
I've played around with shape-rendering, but it only serves to make the edges look even more exaggerated when set to crispEdges. I've tried adding the attribute to the paths directly in the SVG and to the whole shape via CSS to the same effect.
This only occurs when the icons are scaled down—at full size they look fine.
Edit: Here's the SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 30 30" aria-labelledby="checkbox-title" id="checkbox">
<title id="checkbox-title">Checkbox</title>
<path d="M0 0v30h30V0H0zm28 28H2V2h26v26zm-2.2-18L23 7.2l-11 11L7.8 14 5 16.8l7 7L25.8 10zm-18 5.4l3.5 3.5.7.7.7-.7L23 8.6l1.4 1.4L12 22.4l-5.6-5.6 1.4-1.4z"/>
</symbol>
</svg>
Here's how I'm embedding it in my HTML file:
<svg class="svg-icon svg-icon--checkbox">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/icons.svg#checkbox"></use>
</svg>
The CSS I'm applying directly to the SVG is:
.svg-icon {
fill: #333;
height: 1rem;
width: 1rem;
}
And the entire computed CSS for the SVG (including inherited styles, user agent styles, etc.):
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: #333;
display: inline;
fill: #333;
font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
font-size: 15.9625px;
height: 15.9531px;
line-height: 21.5494px;
order-collapse: separate;
overflow-x: hidden;
overflow-y: hidden;
transform-origin: 7.96875px 7.96875px;
width: 15.9531px;
Chrome 50.0.2661.102
Safari 9.1
Mac OS X 10.11.4
I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that.
The child of that is a SVG file which I set the width to 200% of the container.
In chrome and firefox that works fine, I get a nice image like this:
The HTML looks like this:
<div class="kit-template ng-isolate-scope front">
<div class="svg-document ng-scope">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
<!-- Removed for brevity -->
</svg>
</div>
</div>
and the CSS/SASS looks like this:
.kit-template {
overflow: hidden;
position: relative;
height: 320px;
.svg-document {
width: 100%;
overflow: hidden;
margin: 0 auto;
/*position: absolute;
bottom: 0;*/
svg {
width: 200%;
path, polyline, polygon, rect {
cursor: pointer;
}
}
}
}
Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:
And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.
Does anyone know why this is happening and how I can fix it?
Update 1
I have created a very simple version on codepen so you can see the issue.
Here it is:
http://codepen.io/r3plica/pen/Kdypwe
View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.
What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.
Test codepen example in IE11:
http://codepen.io/jonathan/pen/MarvEm
<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">
Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.
I was having SVG image display issue in IE11. The issue was inner svg image was having width and height mentioned. Due to this it was failing to scale properly on IE11 and it was working fine on IE edge, chrome, firefox very fine.
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
To fix the issue I removed width="120" height="120" and its working fine.
When I observed svg image was having width="120" height="120" viewBox="0 0 120 120" but in IE11 it was only showing width="120" height="120".
output was:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
I'm having trouble with a svg pattern background that is not repeating on the x-axis in IE11 (and probably other IEs) and the Android native browser.
Apparently I should add preserveAspectRatio: "none slice" to the svg element, but what if the svg is used as background-image?
CSS
header.logoheader:after {
background-image: url('patroon5.svg');
background-size: auto 100%;
background-repeat: repeat-x;
content: "";
display: block;
height: 100px;
left: 0;
position: absolute;
top: 40px;
width: 100%;
}
(I'm using the :after selector so the transparent pattern covers the div)
In my HTML there is no svg element to add the preserveAspectRatio to. I'm thinking this is because of the :after selector.
Anyone got an solution?
You can either edit the background image svg file to include it or alternatively use an SVG fragment identifier i.e.
background-image: url('patroon5.svg#svgView(preserveAspectRatio(none))');
Had this kind of problem before on IE. To fix it you have to edit your svg file then remove the set width and height assuming you have viewBox set in there. Then add preserveAspectRatio="xMinYMid" as an attribute.
e.g.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
preserveAspectRatio="xMinYMid" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
I'm using SVG's as icons in the following way
The SVG's are saved from in Illustrator CC
<div class="social">
<img src="img/icon_twitter.svg">
<img src="img/icon_facebook.svg">
</div>
This is the CSS. The social div is the wrapper of the 2 's
.social {
position: absolute;
left: 40px;
bottom: 40px;
}
.social img {
width: 50px;
margin-right: 10px;
}
Here are the screenshots with the results, The first one is normal ( chrome )
The other one's are weirdly stretched in the height.
Chrome
Internet Explorer 11
Safari
Here's the SVG code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 28.4 28.4" enable-background="new 0 0 28.4 28.4" xml:space="preserve">
<path fill="#FFFFFF" d="M14.2,0C6.4,0,0.1,6.3,0.1,14.1c0,7.8,6.3,14.1,14.1,14.1s14.1- 6.3,14.1-14.1C28.4,6.3,22,0,14.2,0z
M18,14.1h-2.4c0,3.9,0,8.7,0,8.7h-3.6c0,0,0-4.8,0-8.7h-1.7V11h1.7V9c0-1.4,0.7- 3.7,3.7-3.7l2.7,0v3c0,0-1.6,0-2,0
c-0.3,0-0.8,0.2-0.8,0.8V11h2.8L18,14.1z"/>
</svg>
Solution
In my CSS i only specified width: 50px; for the image element that holds the SVG.
I also had to specify a height: 50px; It's working now!
In your SVG remove the height and widthattr this will make it responsive
read more at MAKING SVGS RESPONSIVE WITH CSS
Solution
I also have to specify the height attribute in my CSS
In my css i was had
width: 50px;
But you also have to specify the height. It's not preserving the aspect from itself.
Thanks everyone!