13

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/

wf4
  • 3,727
  • 2
  • 34
  • 45
  • Have you checked the Accelerated Graphics settings in IE11 ? – Andrea Ligios Nov 20 '13 at 10:44
  • 1
    May also be caused by 'Smart Image Dithering' - which can be enabled in Settings. – naththedeveloper Nov 20 '13 at 10:45
  • I'm fairly certain this will be down to browser rendering settings, but just to double check can you link us up to wherever these background images are? – ajfstuart Nov 20 '13 at 10:46
  • I really hope this is not a setting thing.. I will create a fiddle or something with the markup and background image - it may take me 20 minutes or so, I'll edit my post with the link. – wf4 Nov 20 '13 at 10:48
  • 1
    Also which system, Windows 7 or Windows 8 ? I guess it may be related to http://news.softpedia.com/news/Internet-Explorer-11-for-Windows-7-Blurry-Font-Issues-398251.shtml – Andrea Ligios Nov 20 '13 at 10:52
  • I am running Win7 x64. It's possible that this could be related although that is suggested to be caused by a fault in the Clear Type font rendering.. – wf4 Nov 20 '13 at 10:56
  • On Windows 8.1 x64, with IE 11.0.9600 and Update 11.0.1. Accelerated Graphic rendering (not software). It looks just as it does in all the browsers on my machine. Not really helping you in this case, I know, but it does seem to render OK, It's not fuzzy at all – Code Uniquely Nov 20 '13 at 13:49
  • Is it a significant usability problem? If not, then you shouldn't really care. – bjb568 Nov 21 '13 at 04:10
  • 1
    Another stupid internet problem solved by not using internet explorer – David Hariri Nov 21 '13 at 18:44
  • I am running win8.1x64 and IE11.09600(Update 11.01). I also see the images as being blurry(although not as blurry as in the example). I tried changing the accelerated graphics setting(and restarted program) and it had no effect. Just wanted to confirm the issue. – hal Nov 24 '13 at 14:59
  • If I open the image file http://i.imgur.com/DauuVHW.png their is no blurriness. – hal Nov 24 '13 at 15:05
  • @moss that is correct, this problem only seems to apply when the image is used as a `background-image`. I don't have an answer but It could be a positioning issue, its almost like its not locking the background position to the nearest pixel... – wf4 Nov 24 '13 at 19:06
  • Just a tip: what happens if you set your ie11 back to ie10-compliant mode? – peterh Nov 25 '13 at 07:07
  • @Maxx when using IE11 in IE10 mode, background images are still blurred. Another point to mention, in the Fiddle above, you can get rid of the blur by VERY slightly resizing the window. This could be some kind of scale/pixel issue? – wf4 Nov 27 '13 at 12:44

3 Answers3

9

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

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
  • I would NEVER have even considered that it could have been due to a `border-radius`, especially because that property was supported and would have been applied in IE9 and IE10. Thank you so much for your detailed answer. – wf4 Nov 27 '13 at 13:39
  • It is really strange yea. I couldn't find any relation why this would happen, so probably an unknown bug. But glad i could find a quick fix for you! :) – nkmol Nov 27 '13 at 13:40
2

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.

Feodor Fitsner
  • 2,354
  • 16
  • 13
  • 1
    Thank you for the answer - I am going to rescale the image file to 144 dpi (currently 72) and will add a new link to that fiddle to show the results. :-) – wf4 Nov 28 '13 at 09:42
  • ok, so I recreated (part of) the image which I used in the fiddle and have updated with the background-size. I have to admit that it "appears" to be ok, its not pixel perfect but its certainly better than the first image. http://jsfiddle.net/3g52E/5/ – wf4 Dec 02 '13 at 13:14
1

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.

Community
  • 1
  • 1
user2718671
  • 2,866
  • 9
  • 49
  • 86