Blurry background images after update to IE11

Question

So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.

I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again... I am completely baffled.

I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?

I've included a screen shot showing the images in the different browsers.

Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/

Answer 1

Well i can see what is causing this problem. It's the border-radius of your ._ui.

Now i can't tell you why this happens.
However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.

Use image element

<img src="http://i.imgur.com/DauuVHW.png" />

Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:

.block1 > div
{
    position: relative;
    overflow: hidden;
}

This will add the properties on ._ui _bre and ._ui _com.

Where the basic image properties are:

img
{
    position: absolute;
    left: 2px;
}

Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:

._bre._ui img
{
    top: -68px;
}

._com._ui img
{
    top: -24px;
}

This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.

jsFiddle