0

On my site, I have icons sized using percentages.

They show up beautifully on Chrome and even in IE

enter image description here

But in Firefox, they blur like so

enter image description here

<style>
  #exampleicon 
  { 
  background-image: url(assets/resume.ico);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-clip: border-box;
  -webkit-transition: background-size 0.2s;
  width: 15%;
  height: auto;
  }
</style>

I tried using the -moz-crisp-edges method described in this thread but the images simply pixelate.

Community
  • 1
  • 1
Matt
  • 2,953
  • 3
  • 27
  • 46
  • can you recreate this in a fiddle? It's hard to test without your html and image – jmore009 Jan 22 '14 at 01:24
  • Sorry about that. Since you can't use local storage on Fiddle I used imgur and [it works now on the fiddle](http://jsfiddle.net/R7F9E/) I guess Firefox just had a problem with the ico files? I was using png but the edges weren't smooth on resizing and I couldn't find a decent svg converter that retained transparency/colour. – Matt Jan 22 '14 at 02:15

0 Answers0