размер фона в rem вызывает проблемы в ie11 и edge

Question

У меня есть значок, который я хочу добавить в фоновый размер в rem, чтобы его можно было изменить при увеличении размера шрифта сайта:

https://codepen.io/stephendesjardins/project/full/ZjVOMG

У меня есть этотcss:

.box {
  width:20px;
  height:20px;
}
.box:before {
    content: "";
    position: absolute;
    top: .25rem;
    left: 0;
    background-image: url(../icon.svg);
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: 1.1875rem 1.1875rem;
}

вот иконка:

<svg version="1.1" id="ic-liens" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 19 19" xml:space="preserve"><path id="fleche" fill="#007944" d="M6.5 4.986l4.472 4.513L6.5 14.012l1.069 1.538L13.5 9.499 7.569 3.55z"/><path id="cercle" fill="#007944" d="M9.5 0C4.3 0 0 4.3 0 9.5S4.3 19 9.5 19 19 14.7 19 9.5 14.7 0 9.5 0zm0 17.3c-4.3 0-7.8-3.5-7.8-7.8s3.5-7.8 7.8-7.8 7.8 3.5 7.8 7.8-3.5 7.8-7.8 7.8z"/></svg>

в хроме это выглядит хорошо: но это ie11 это делает так:

Кажется, это вызвано размером фона в rem.Если я добавлю пиксели, это нормально.Если я добавлю веб-сайт с базовым размером шрифта 10, то rem работает.

любая помощь будет оценена