IE11 making background image text blurry

Question

I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images).

The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following 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);
}

So is this just an IE flaw, or can I actually do something about it ?

Thanks in advance.

EDIT: I might just add, that if I just insert the same image as <img src="lala.png"> the text is NOT blurry. It only applies to backgrounds :/

Answer 1

It is a normal IE bug.

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

i Haven't found any solutions to this subject yet.

Answer 2

I'd recommend not having that button as a sprite at all for the following reasons-

1. It is not accessible or SEO efficient - neither screen readers nor search engine crawlers can read the text in the image.
2. It requires an additional HTTP request to download the sprite image, which will make your site load more slowly - especially on mobile devices
3. Unless you make the button much larger than it needs to be rendered on the page and scale down, then you will have issues of blurring when scaling up on high density devices, such as newer full size iPads and premium Android tablets, recent Macs and premium windows laptops. Clearly making the image larger than it needs to be means it is larger and exacerbates the speed penalty from point two.
4. If you want to change the colour scheme at any point in the future, you only need to change your CSS color properties, not re-generate new images.
5. It is trivial to make this button appear like your screenshot in CSS.

If you use markup something like this-

<button class="text-button" type="button">Send Besked</button>

And CSS like this-

.text-button {  
    background: #b32e01;
    border: none;
    border-radius: 8px 8px 8px 0;
    color: #ffffff;
    cursor: pointer;
    height: 3em;
    outline: none;
    padding: 1em 0;
    text-transform: uppercase;
    width: 12.5em;
}

.text-button:hover {
    -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);
}

It ends up looking like this (see JSFiddle for source)-

Although only a rough mockup (you may want to change proportions, add a gradient or change the background on hover - I can't see the original sprite to know the transformations you make in the hover state sprite) it already looks much like the original, and with all the advantages above - in particular that it should solve the text problem you originally posted.

Answer 3

I've just come across this issue.

I just placed the background image inside a span to keep the border radius and background image on different elements, seems to have done the trick.

.item {
   border-radius: 8px 8px 8px 0;
}

.item span {
    background-image:url('imagepath.png');
}

Answer 4

I found success in eliminating the blur effect by using :not(:hover). It seems to force the background-image into not blurring.

Try adding

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