0

I'm currently working on a web application and one of the most important facts for out client is that it is user friendly, so it includes a lot of icons.

We are working with sprites, which we made ourselves since the app will include mostly custom icons that you cannot find anywhere else. Everything is working fine, except if you take a look on Edge or IE, the icons are horribly pixelated and anti-aliased.

One of the things we have noticed is that this seems to be the case only for rounded icons, so basically anything that is not a straight line looks bad. I will post a few comparisons below.

Comparison of Chrome/Edge/IE issues

As you can see, for the edit icon it looks pretty much the same, but for the other two its clearly very different.

The code that generates these icons looks like this:

.sprite { //sets the sprite that is going to be used
    background: url('/img/default-icons.png');
    background-repeat: no-repeat;
}

.header-edit { //specific icon, this is for the edit button
    .sprite;
    background-position: -91px -90px;
    background-size: 242px 370px;
}

<button //button for which it is called
      className="header-item header-edit editWizard"
      onClick={e => this.clickSettings()}
>

Does anyone have any sort of suggestion as to why this is happening and a possible fix?

Thanks in advance!

aleksxp
  • 55
  • 8
  • Note that the rounded corners of the edit are different. You can see it more in the circle because it's easier to see pixelation. See https://stackoverflow.com/questions/22769474/how-to-render-thin-fonts-more-smoothly-in-css-3-on-windows – Ruan Mendes Nov 09 '18 at 12:04
  • 1
    Also, you should show the code that generates those icons – Ruan Mendes Nov 09 '18 at 12:08
  • @JuanMendes thanks for the suggestion. I have edited my post to include the way the icons are generated – aleksxp Nov 09 '18 at 12:16
  • Are you resizing the image? See [`image-rendering`](https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) https://codepen.io/robinrendle/pen/XJPPMW A live example would make it easier to help. – Ruan Mendes Nov 09 '18 at 13:01
  • @Juan Mendes Sorry for the late answer. Image-rendering does not work on edge, see: [link](https://caniuse.com/#feat=css-crisp-edges) . Will try to post a codepen later – aleksxp Nov 13 '18 at 07:13
  • 1
    You should try your icons with [svg]() or [fonts](https://fontawesome.com/icons/fish?d=gallery&style=solid). IE does a better job of smoothing them. – Ruan Mendes Nov 13 '18 at 13:59

0 Answers0