CODEWITHSUNDEEP
cssbackground-imageinternet-explorer-11
wf4
wf4

Reputation: 3827

Blurry background images after update to IE11

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.

IE 11 blurry background images

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/

Upvotes: 13

Views: 10694

Answers (3)

user2718671
user2718671

Reputation: 2976

According to this:How to write a CSS hack for IE 11?

I added this code to my CSS:

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 } 
}

With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.

Upvotes: 1

Feodor Fitsner
Feodor Fitsner

Reputation: 2354

There is probably more elegant way to fix blurry images in IE 11.

In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.

However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.

Looks great in IE 11 and on retina displays.

Upvotes: 2

nkmol
nkmol

Reputation: 8091

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

Upvotes: 9

Related Questions