The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background-image blurred in IE11/Edge

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #246410

    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?


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


    Here you go…

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.