New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

some glyphicons misrendered on Windows #13657

Closed
Bromoxid opened this Issue May 22, 2014 · 46 comments

Comments

Projects
None yet
10 participants
@Bromoxid

Bromoxid commented May 22, 2014

There are some false displayed glyphicons

http://jsfiddle.net/sn8h2/

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

They look fine to me. Please explain your problem in greater detail.

Member

cvrebert commented May 22, 2014

They look fine to me. Please explain your problem in greater detail.

@Butter1484

This comment has been minimized.

Show comment
Hide comment
@Butter1484

Butter1484 May 22, 2014

I also have the same problem. The glyphicons do not appear as represented on the glyphicon list. In bootstrap.css they are glyphicons e011 and e012.

Butter1484 commented May 22, 2014

I also have the same problem. The glyphicons do not appear as represented on the glyphicon list. In bootstrap.css they are glyphicons e011 and e012.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

On what browser and OS?
Using BootstrapCDN.com or not?

Member

cvrebert commented May 22, 2014

On what browser and OS?
Using BootstrapCDN.com or not?

@Butter1484

This comment has been minimized.

Show comment
Hide comment
@Butter1484

Butter1484 May 22, 2014

I'm getting it on Windows 7 Firefox 22 not using BootstrapCDN.com

Butter1484 commented May 22, 2014

I'm getting it on Windows 7 Firefox 22 not using BootstrapCDN.com

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 22, 2014

ok , i mean there are glyphicons but they did'nt look like at http://getbootstrap.com/components/#glyphicons
unbenannt

I'm using win 7 but crome, (without CDN)
and I've also testet it on a mac with crome but there was all right...

Bromoxid commented May 22, 2014

ok , i mean there are glyphicons but they did'nt look like at http://getbootstrap.com/components/#glyphicons
unbenannt

I'm using win 7 but crome, (without CDN)
and I've also testet it on a mac with crome but there was all right...

@cvrebert cvrebert changed the title from glyphicons misrepresented! to glyphicons misrendered on Windows May 22, 2014

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

What about in IE?
@Butter1484 Does that screenshot match what you're seeing?

Member

cvrebert commented May 22, 2014

What about in IE?
@Butter1484 Does that screenshot match what you're seeing?

@Bromoxid Bromoxid closed this May 22, 2014

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 22, 2014

yes, IE (win 7) has the same problem

Bromoxid commented May 22, 2014

yes, IE (win 7) has the same problem

@Bromoxid Bromoxid reopened this May 22, 2014

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

Did you recently install a Windows Update or something?

Member

cvrebert commented May 22, 2014

Did you recently install a Windows Update or something?

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 22, 2014

last update was yesterday but i think i've seen this before maybe 2 weeks ago for the first time

Bromoxid commented May 22, 2014

last update was yesterday but i think i've seen this before maybe 2 weeks ago for the first time

@Butter1484

This comment has been minimized.

Show comment
Hide comment
@Butter1484

Butter1484 May 22, 2014

@cvrebert yes that screenshot shows what I see. They do look fine on getbootstrap.com though

Butter1484 commented May 22, 2014

@cvrebert yes that screenshot shows what I see. They do look fine on getbootstrap.com though

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

@Bromoxid Do the icons on http://getbootstrap.com/components/ display correctly for you, or not?

Member

cvrebert commented May 22, 2014

@Bromoxid Do the icons on http://getbootstrap.com/components/ display correctly for you, or not?

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 22, 2014

yes, there is everything ok

Bromoxid commented May 22, 2014

yes, there is everything ok

@xt0rted

This comment has been minimized.

Show comment
Hide comment
@xt0rted

xt0rted May 22, 2014

Contributor

If you zoom-in with the browser, or change the base font size to 15px or larger, then they appear correctly. On getbootstrap.com I can switch the font size back to 14px and they display correctly as well, just not with the files the jsfiddle is using.

Contributor

xt0rted commented May 22, 2014

If you zoom-in with the browser, or change the base font size to 15px or larger, then they appear correctly. On getbootstrap.com I can switch the font size back to 14px and they display correctly as well, just not with the files the jsfiddle is using.

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 22, 2014

ah yea, if I zoom to 110% it's fine but under 100% it changes... crasy s...

Bromoxid commented May 22, 2014

ah yea, if I zoom to 110% it's fine but under 100% it changes... crasy s...

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

Well, I just verified that the checksums of the CDN files are correct, so it's not like it's serving the wrong files...
Is anyone experiencing this who's not using BootstrapCDN?

Member

cvrebert commented May 22, 2014

Well, I just verified that the checksums of the CDN files are correct, so it's not like it's serving the wrong files...
Is anyone experiencing this who's not using BootstrapCDN?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

Also, is anyone experiencing this issue on a non-Windows OS?

Member

cvrebert commented May 22, 2014

Also, is anyone experiencing this issue on a non-Windows OS?

@xt0rted

This comment has been minimized.

Show comment
Hide comment
@xt0rted

xt0rted May 22, 2014

Contributor

I checked on BrowserStack and it seemed like only Windows was an issue.

Contributor

xt0rted commented May 22, 2014

I checked on BrowserStack and it seemed like only Windows was an issue.

@cvrebert cvrebert added the confirmed label May 22, 2014

@cvrebert cvrebert added this to the v3.2.1 milestone May 22, 2014

@cvrebert cvrebert changed the title from glyphicons misrendered on Windows to some glyphicons misrendered on Windows May 22, 2014

@Butter1484

This comment has been minimized.

Show comment
Hide comment
@Butter1484

Butter1484 May 22, 2014

@cvrebert I am not using the CDN files

Butter1484 commented May 22, 2014

@cvrebert I am not using the CDN files

@Butter1484

This comment has been minimized.

Show comment
Hide comment
@Butter1484

Butter1484 May 22, 2014

This issue has also now been confirmed in chrome as well

Butter1484 commented May 22, 2014

This issue has also now been confirmed in chrome as well

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

Yes, this seems to have been confirmed in all major Windows browsers.

Member

cvrebert commented May 22, 2014

Yes, this seems to have been confirmed in all major Windows browsers.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 22, 2014

Member

@jankovarik Hi Jan! By chance, have you ever encountered this issue before?

Member

cvrebert commented May 22, 2014

@jankovarik Hi Jan! By chance, have you ever encountered this issue before?

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik May 23, 2014

@cvrebert Hi Chris, I've never seen this issue before :/

jankovarik commented May 23, 2014

@cvrebert Hi Chris, I've never seen this issue before :/

@xt0rted

This comment has been minimized.

Show comment
Hide comment
@xt0rted

xt0rted May 23, 2014

Contributor

A bit more testing shows this is only an issue when the font size is 13px or 14px. It happens on getbootstrap.com with those sizes as well.

Contributor

xt0rted commented May 23, 2014

A bit more testing shows this is only an issue when the font size is 13px or 14px. It happens on getbootstrap.com with those sizes as well.

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik May 23, 2014

@cvrebert Chris, can you send me your email on: glyphicons (at) gmail com, we'll find what's wrong, thanks.

jankovarik commented May 23, 2014

@cvrebert Chris, can you send me your email on: glyphicons (at) gmail com, we'll find what's wrong, thanks.

@Bromoxid

This comment has been minimized.

Show comment
Hide comment
@Bromoxid

Bromoxid May 23, 2014

@xt0rted the font size is irrelevant, if i use 18px an zoom out at the browser, we have the same thing

Bromoxid commented May 23, 2014

@xt0rted the font size is irrelevant, if i use 18px an zoom out at the browser, we have the same thing

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 10, 2014

Member

Any update on this? We have a test jsbin to load up in Windows to verify this?

Member

mdo commented Jun 10, 2014

Any update on this? We have a test jsbin to load up in Windows to verify this?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
Member

cvrebert commented Jun 10, 2014

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 10, 2014

Member

Confirmed in Win7 on Sauce with Chrome, Firefox, and IE11.

Member

cvrebert commented Jun 10, 2014

Confirmed in Win7 on Sauce with Chrome, Firefox, and IE11.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 10, 2014

Member

Confirmed in Win8.1 on Sauce with IE11.

Member

cvrebert commented Jun 10, 2014

Confirmed in Win8.1 on Sauce with IE11.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 10, 2014

Member

Unsure there's a CSS change I can make to improve this—might be a problem with the font glyphs themselves.

Member

mdo commented Jun 10, 2014

Unsure there's a CSS change I can make to improve this—might be a problem with the font glyphs themselves.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 10, 2014

Member

My guess is it's due to ClearType or antialiasing or similar.

Member

cvrebert commented Jun 10, 2014

My guess is it's due to ClearType or antialiasing or similar.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 10, 2014

Member

Confirmed on WinXP with Chrome 35.

Member

cvrebert commented Jun 10, 2014

Confirmed on WinXP with Chrome 35.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 10, 2014

Member

@jankovarik I don't have any additional information to offer you beyond what's already in the issue comments. Was there something else you wanted/needed?

Member

cvrebert commented Jun 10, 2014

@jankovarik I don't have any additional information to offer you beyond what's already in the issue comments. Was there something else you wanted/needed?

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 10, 2014

@cvrebert I need your email (as I asked above earlier), I'd send you a link to the live version of regular GLYPHICONS and I'd need you to try to test this page and get back to me, is it possible? My email: glyphicons@gmail.com

Once we know that it is a problem on my side, I'll try to fix this somehow asap ;]

Thanks

jankovarik commented Jun 10, 2014

@cvrebert I need your email (as I asked above earlier), I'd send you a link to the live version of regular GLYPHICONS and I'd need you to try to test this page and get back to me, is it possible? My email: glyphicons@gmail.com

Once we know that it is a problem on my side, I'll try to fix this somehow asap ;]

Thanks

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 10, 2014

Guys, is there anybody who is able to test it? If yes, please, send me your email on: glyphicons@gmail.com and I'll get back to you. As I do not have any machine with Windows around me at this moment, it's not easy to see what's wrong ;)

jankovarik commented Jun 10, 2014

Guys, is there anybody who is able to test it? If yes, please, send me your email on: glyphicons@gmail.com and I'll get back to you. As I do not have any machine with Windows around me at this moment, it's not easy to see what's wrong ;)

@juthilo

This comment has been minimized.

Show comment
Hide comment
@juthilo

juthilo Jun 10, 2014

Member

@jankovarik Email sent. :)

Member

juthilo commented Jun 10, 2014

@jankovarik Email sent. :)

@juthilo juthilo self-assigned this Jun 10, 2014

@XhmikosR

This comment has been minimized.

Show comment
Hide comment
@XhmikosR

XhmikosR Jun 11, 2014

Member

Feel free to ping me if more testing on Windows is needed @jankovarik.

Member

XhmikosR commented Jun 11, 2014

Feel free to ping me if more testing on Windows is needed @jankovarik.

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 11, 2014

@XhmikosR Thanks, I'm already in touch with @juthilo and I'm just trying to find what's wrong. At this time, it looks like Windows are rendering fonts really strange in some sizes, but I'll take a deeper look on it.

jankovarik commented Jun 11, 2014

@XhmikosR Thanks, I'm already in touch with @juthilo and I'm just trying to find what's wrong. At this time, it looks like Windows are rendering fonts really strange in some sizes, but I'll take a deeper look on it.

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 11, 2014

OK guys, I've spent some time in http://www.browserstack.com/ today, so to sum up:

The problem:
the problem is that some symbols are partially blending in, especially those with thin horizontal lines.

It looks like combination of two factors:

  • first of all, you probably have antialiasing turned-off (or your browser/OS is not supporting it)
  • secondly (more important), you shouldn't use unusual (and unnecessary) font-size values, since this is the main problem and solution as well: all you have to do is to keep your font-size in basic: 12px/1em or its multiples (24px, 48px, ...) or at least some other even numbers.

As this is not even related to font hinting, I'm not sure that there is anything else I can do more from my side,... of course I can be wrong though ;]

Please let me know if you have another opinion supported by some facts/screenshots. I'll be here ;)

jankovarik commented Jun 11, 2014

OK guys, I've spent some time in http://www.browserstack.com/ today, so to sum up:

The problem:
the problem is that some symbols are partially blending in, especially those with thin horizontal lines.

It looks like combination of two factors:

  • first of all, you probably have antialiasing turned-off (or your browser/OS is not supporting it)
  • secondly (more important), you shouldn't use unusual (and unnecessary) font-size values, since this is the main problem and solution as well: all you have to do is to keep your font-size in basic: 12px/1em or its multiples (24px, 48px, ...) or at least some other even numbers.

As this is not even related to font hinting, I'm not sure that there is anything else I can do more from my side,... of course I can be wrong though ;]

Please let me know if you have another opinion supported by some facts/screenshots. I'll be here ;)

@Quy

This comment has been minimized.

Show comment
Hide comment
@Quy

Quy Jun 11, 2014

Contributor

With FontAwesome, they appear fine. See here: http://jsfiddle.net/Pe8bK/
Hopefully, you can glean something from it.

Contributor

Quy commented Jun 11, 2014

With FontAwesome, they appear fine. See here: http://jsfiddle.net/Pe8bK/
Hopefully, you can glean something from it.

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 12, 2014

@Quy :) ok, check this: http://cl.ly/image/070o2l1t0T47 (12px basic size), once again: the basic (recommended) size of GLYPHICONS Halflings is 12px or its multiples. Your example is showing icons in 14px basic size, if you change the font size to 12px, then FontAwesome is blurred. It's all because GLYPHICONS are using different grid size. You'd have to re-create all icons in basic 14px size/grid in order to have them all pixel perfect on all platforms with all font render settings.

jankovarik commented Jun 12, 2014

@Quy :) ok, check this: http://cl.ly/image/070o2l1t0T47 (12px basic size), once again: the basic (recommended) size of GLYPHICONS Halflings is 12px or its multiples. Your example is showing icons in 14px basic size, if you change the font size to 12px, then FontAwesome is blurred. It's all because GLYPHICONS are using different grid size. You'd have to re-create all icons in basic 14px size/grid in order to have them all pixel perfect on all platforms with all font render settings.

@dmanzer

This comment has been minimized.

Show comment
Hide comment
@dmanzer

dmanzer Jun 14, 2014

I'm experiencing GLYPHICONS rendering issues as well testing in a win7 - iE8 environment. Some or most view great (as long as you put the @font-face and @import selectors in the head instead of the style sheet) but if there's a select few for some strange reason that render as missing. Why some and not all? This seems as if it's an issue with the font file itself. Has anyone had a similar issue and does anyone have a fix?

dmanzer commented Jun 14, 2014

I'm experiencing GLYPHICONS rendering issues as well testing in a win7 - iE8 environment. Some or most view great (as long as you put the @font-face and @import selectors in the head instead of the style sheet) but if there's a select few for some strange reason that render as missing. Why some and not all? This seems as if it's an issue with the font file itself. Has anyone had a similar issue and does anyone have a fix?

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 14, 2014

@dmanzer So you can't see some of the icons? Can you please make a screenshot with this issue, including your OS and browser version? Thank you.

jankovarik commented Jun 14, 2014

@dmanzer So you can't see some of the icons? Can you please make a screenshot with this issue, including your OS and browser version? Thank you.

@dmanzer

This comment has been minimized.

Show comment
Hide comment
@dmanzer

dmanzer Jun 16, 2014

Thank you for your response, jankovarik. Attached are three screen shots. One of ie8 in win7, ie10 in win7 and OSX in firefox. The one I'm having issues with is ie8 in windows 7, strange environment but I've had reports from end users that this combination crashes when I have the @font-face in the style sheet. That's sort of how I got to this point. Never the less, I'm past that and now and I'm trouble shooting this issue with the missing glyphicons. The glyphicons are working great in ie9, ie10 and all browsers in OSX. Please take a look and let me know what you think. Thx!
1-glyphicons-ie8
2-glyphicons-ie10
3-glyphicons-osx

dmanzer commented Jun 16, 2014

Thank you for your response, jankovarik. Attached are three screen shots. One of ie8 in win7, ie10 in win7 and OSX in firefox. The one I'm having issues with is ie8 in windows 7, strange environment but I've had reports from end users that this combination crashes when I have the @font-face in the style sheet. That's sort of how I got to this point. Never the less, I'm past that and now and I'm trouble shooting this issue with the missing glyphicons. The glyphicons are working great in ie9, ie10 and all browsers in OSX. Please take a look and let me know what you think. Thx!
1-glyphicons-ie8
2-glyphicons-ie10
3-glyphicons-osx

@jankovarik

This comment has been minimized.

Show comment
Hide comment
@jankovarik

jankovarik Jun 16, 2014

@dmanzer Thanks for your screenshots! I'm not sure why we (me and my HTML/CSS coder) dropped support of IE 8 (I'll get back to you later, once I know more), but if you're using icons and code from Bootstrap, it should be working without a hitch: http://www.browserstack.com/screenshots/6cb551b266b123edfc8a8467590b3f72a4144501/win7_ie_8.0.png

jankovarik commented Jun 16, 2014

@dmanzer Thanks for your screenshots! I'm not sure why we (me and my HTML/CSS coder) dropped support of IE 8 (I'll get back to you later, once I know more), but if you're using icons and code from Bootstrap, it should be working without a hitch: http://www.browserstack.com/screenshots/6cb551b266b123edfc8a8467590b3f72a4144501/win7_ie_8.0.png

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 19, 2014

Member

Closing as a non Bootstrap problem, but please continue to discuss as need be.

Member

mdo commented Jun 19, 2014

Closing as a non Bootstrap problem, but please continue to discuss as need be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment