Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan).
In all browsers except for IE, my example displays as desired:
However, in Internet Explorer, it looks different:
I used to encounter this issue on multiple browsers until I added the following code:
svg {
width: auto !important;
}
This resolved the problem on most browsers, but not on IE...
If you want to take a look at a simplified working example that you can modify, check out: http://codepen.io/failure13/pen/waxaOx
I'm perplexed by how IE is interpreting the `width: auto;` property. I've tried various solutions without success. It seems like there might be a bug causing this unexpected behavior.
If anyone has a workaround or solution, I would greatly appreciate it. I'd prefer not to resort to using fixed width values, as it's more of a workaround than a true fix.
Thank you in advance to anyone who can offer assistance and help make the web a better place!