background-image blurred in IE11/Edge

[grimski]

It’s the first time I’ve come across this issue and I’m wondering if others have as well?

While cross-browser testing a website I’ve been working on I noticed that background-images I’ve applied to buttons were blurred. Fine in other browsers and in IE8/9 for example. It looks how background-image’s appear on an iPhone look if you don’t specify retina images for @2x resolutions.

What’s strange is that if I remove border-radius: 4px from the object (which is an anchor/button. The images display as they should, nice and sharp. So it seems it’s rounding corners that causes the issue.

A very, very strange bug! I can’t seem to find a fix for this. Has anyone else encountered it?

[giudev]

Could you please provide a link or replicate the behaviour on codepen?

[grimski]

Here you go… http://codepen.io/moy/pen/GjGdmb

It doesn’t seem as bad in CodePen but when I scale the width of the viewport the blurriness does appear – though it changes from icon to icon. So I’m guessing it’s also something to do with pixel rounding.

Removing the border-radius does resolve the issue though.

[Author]

Posts