Размытие фонового изображения Internet Explorer 11 с граничным радиусом

У меня есть div с граничным радиусом и фоновым изображением, это хорошо видно во всех браузерах, за исключением Internet Explorer 11, где фоновое изображение выглядит размытым.

Как я могу исправить эту проблему?

<span class="button boxsizing soundicon"></span>

CSS

.roomscene .top .roominfo .center span.button {
    height: 29px;
    width: 29px;
    background-color: #23221d;
    border-radius: 7px;
    border: 2px solid #494742;
    margin-top: -10px;
    display: inline-block;
    float: right;
}

.roomscene .top .roominfo .center span.button:hover {
    background-color: #2f2d27;
    cursor: pointer;
}

.roomscene .top .roominfo .center .soundicon {
    background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
}

EDIT:

Я заметил, что если я удалю положение "центра центра" фона из .soundicon(или радиуса границы из span.button), размытие исчезнет, но мне все равно нужно правильно расположить свой фон..

EDIT2:

Действительно странная ошибка IE11, кажется, что если я укажу позицию в px вместо центра или 50%, фоновое изображение не будет размыто/быть беспорядочным.

Internet Explorer по-прежнему является плохим браузером.

EDIT3:

Нет, с позицией px, уже размывается на некоторых изображениях, но меньше, чем если я использую center/%.

ПРЯМОЙ ПРИМЕР:

http://codepen.io/toomuchdesign/pen/ojspA

Ответ 1