Chrome/Webkit truncated icons

[Kaan Soral]

No matter what I do, I can't prevent truncated icons in Chrome or Webkit, both OSX/Win Chrome's seem to suffer from the issue

It's not an Icomoon issue specifically, It also exists on the legacy FontAwesome 3.2.1 I use (Also tested the latest font-awesome exported from icomoon, no change)

Things I tried:

1) Various alternative font-face's, font-file types, tried each file type one by one, the issue exists on them all

2) Various CSS styles, like showing overflows, setting line-height's, changing font-size's, changing the font-size seems to shift the issue, but it's still there, for example the menu icon of icomoon doesn't render well at 32px, but 23px is even worse

So I pretty much exhausted all my options

The issue is simple to describe, 5% of the icons get truncated from one or two edges

My previous solutions seems to be using a custom font-face, but it obviously doesn't work anymore, as tested at (1)

If the issue was Chrome-only, I would hope it's a bug, but the issue also exists with Phonegap/Webkit

[Kaan Soral]

3) My Em Square Height is also 1024, it was previously 512, but upping it to 1024 didn't solve the issue for me (ref: https://john-dugan.com/prevent-icon-font-cut-off-chrome/ - comments)

[Keyamoon]

Please attach your generated zip pack. But as far as I've tested, it's a font rendering bug in webkit. What happens when you change your font-size in CSS? This cutting off would probably disappear at certain sizes.

[Kaan Soral]

Deleted the previous post after fixing the issue

There are actually 2 issues

1) Adding opacity to icons triggers the rendering issue at webkit, opacity shouldn't be used with icons, colors should be modified instead, if possible, this was possible for me

2) -webkit-backface-visibility: hidden; was a previous solution to android/webkit icon issues, however at android 5, this solution was the trigger

So for (2), this was my solution to android issues at samsung/android<=4, but the css was the cause of the issue at android 5