First off : HUGE thanks to BenBodhi for the amazing plugin !
@sfisher777 :
This is not the plugin’s fault, it’s actually a known IE11 bug.
Usually, IE11 will just show an SVG document at the ‘default’ size,
which is 150px high and up to 300px wide.
Your SVG image should not be distorted, however, unless it has some animation
– which IE11 also can’t handle.
The simplest fix that I’ve come up with until now, is to detect IE11 and
have a JS assign a body class, like ‘ie11’.
You can find a snippet here
Actually, here it is : it’s just a short piece of jQuery.
jQuery(window).load(function() {
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
jQuery('body').addClass('ie11');
}
You need to add this to your theme’s ‘main’ js, and I can’t help you there, because this varies from theme to theme.
Then, in the theme’s stylesheet, you need to add some CSS that will only target the ‘offending’ instances of your images, and the offending browser ( IE11 ), and give them a height that you need them to render at ( if the height is not declared, IE11 will just default to 150px ).
Your CSS should look something like this :
body.ie11 .your-class {
height: 400px;
width: 100%;
}
You can play with the height until you get the size you need.
If this doesn’t fix your issue, and your image is ‘badly distorted’ – and it’s not because of an embedded animation, you may have some other things going on.
Hope this helps.
Cheers,
Greg
