Microsoft WHY WHY WHY!
I have gone back in time. I am fighting with IE AGAIN.
Internet Explorer Version 11. Its the latest and greatest, and for the most part standards compliant browser. Well done.
SVG
Today I have been using SVG graphics. SVG's are awesome, they are the future, they should have been around 10 years ago, except for IE's failure to support them. Finally now all modern browsers support them (and have done for a while), at least in their basic incarnation.
<img src="mywonderfulgraphic.svg" />
<img onerror="this.onerror=null;this.src='fallback.png'" src="newshiny.svg" />
There are other ways to do this I agree, but this way to me seems the simplest, and most efficient.
I have also added a simple server optimisation. Doing some "evil" browser sniffing, if the browser is MSIE 8 or below, I just serve the PNG, and don't bother with SVG.
<img src="fallback.png" />
So far so good.
Until we come to IE11
IE has an SVG scaling bug, which means the SVG image wont scale correctly: Given a percentage width it wont scale the height appropriately resulting in stretched images. PNG's scale just fine.
I investigated trying to fiddle it, using CSS, but without jumping through a lot of hoops, it becomes just awkward. So my next thought was, it's ok, I can just deliver the PNG instead, I'll just use the browser sniffing to check the IE version.
The IE team have decided to the remove "MSIE" from the User Agent String. I now dont know which browser is talking to the server, because IE pretends to be all of them.
(Update) Actually they have changed the User Agent String, and after a bit of fidding the IE browser version can be detected for any IE version using the following regex:
(Update) Actually they have changed the User Agent String, and after a bit of fidding the IE browser version can be detected for any IE version using the following regex:
\b(?:MSIE\s|Trident\/[0-9.]+;\srv:)([0-9.]+)
It can used like this from PHP:
$version = [false,false];
$isIE = preg_match("/\b(?:MSIE\s|Trident\/[0-9.]+;\srv:)([0-9.]+)/",$_SERVER['HTTP_USER_AGENT'],$version);
return $isIE? $version[1]: false;
Aha!, they say "You should be using feature detection instead of User Agent sniffing".
Well thats all very well if your features worked like they should, then I wouldn't have to deliver browser specific content in the first place. Which, as a matter of fact, is why browser sniffing was needed in the first place!
What about conditional comments you say.
Nope they don't work for IE11 either. The IE team decided to remove them from IE 11.
Rock meet Hard Place.
(Update) There are various sites on the interwebs which give ideas about getting round the SVG issue eg. larrybotha on github
If I make sure the SVG has the viewBox attribute set, I can set the height in CSS to 100%
To target IE 10+ browsers, use the following css media query:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles */
.selector img[src$=".svg"] { height: 100%; }
}
(Update) Safari also suffers from SVG scaling bugs. I was trying to do hovering on scaled images, using image replacement, and every time the image got swapped, it messed up the image aspect or scaling.
