SVG backgrounds are getting cut off in IE11 when zooming

Question

We are trying to display SVG backgrounds in internet explorer. Our images are always getting cut off when a zoom other than 100% is used. This can be reproduced using the following code:

with this svg

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>

div {
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}

<div></div>

The result looks like this:

In all other browsers it renders fine. Has anyone else ever experienced this bug? Is there a workaround?

Answer 1

I have found one workaround which requires very little work:

Make the SVG image 2X size of the actual content (this would make the circle look like this:

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>

Then use the :after pseudo element to create an inside element with 2x the desired size. So the html would be

<div class="circle"></div>

And the css would be

.circle {
    width: 14px;
    height: 14px;
    position:relative;
}
.circle:after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    background-image: url('circle.svg');
}

The extra space in the :after pseoudoelement gives IE spare canvas to draw on, but both the visible icon and the space occupied by the original container remain the same.