Pracuję na stronie internetowej, na której używam obrazków na przycisku. W każdej innej przeglądarce, którą próbowałem, z wyjątkiem IE11, tekst na ikonce jest wyraźny, jak powinien być, ale w IE11 tekst staje się zamazany (patrz obrazy).

Rozmazany obraz to IE11 ofc. Szerokość ikonki wynosi 189 pikseli, a wysokość 378 pikseli. Używam następującego CSS:

button {
    width:189px;
    height:189px;
    background-image:url('../images/kontakt-os.png');
    background-position: top;
    cursor:pointer;
    border-radius: 100px;
}

button:hover {
    background-position: bottom;
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}

Czy to tylko wada IE, czy może mogę coś z tym zrobić?

Z góry dziękuję.

EDYCJA: Mogę po prostu dodać, że jeśli po prostu wstawię ten sam obraz co<img src="lala.png"> tekst NIE jest rozmazany. Dotyczy tylko tła: /