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

Icon font blurry in Firefox #15434

Closed
diggy opened this Issue Jun 3, 2017 · 6 comments

Comments

Projects
None yet
2 participants
@diggy
Contributor

diggy commented Jun 3, 2017

out of the box:

ff-1

with -moz-osx-font-smoothing: grayscale;:

ff-2

  • macOS Sierra 10.12.3
  • Firefox 53.0.3
@mjassen

This comment has been minimized.

Show comment
Hide comment
@mjassen

mjassen Jun 3, 2017

Hi, thanks for writing. I am looking on firefox on a dev setup, in the Admin dashboard, under "Products" menu.

I don't immediately see the symptom. Can you write back a description of where (which screen) is being viewed when the symptom manifests itself?

( I couldn't tell which screen it is from the two screenshots above, as they don't show the rest of the page nor the page url)

A screenshot of my point of view:
screen shot 2017-06-03 at 12 06 45 pm

my test environment:
macOS Sierra 10.12.5
Firefox 53.0.3 (64-bit)

mjassen commented Jun 3, 2017

Hi, thanks for writing. I am looking on firefox on a dev setup, in the Admin dashboard, under "Products" menu.

I don't immediately see the symptom. Can you write back a description of where (which screen) is being viewed when the symptom manifests itself?

( I couldn't tell which screen it is from the two screenshots above, as they don't show the rest of the page nor the page url)

A screenshot of my point of view:
screen shot 2017-06-03 at 12 06 45 pm

my test environment:
macOS Sierra 10.12.5
Firefox 53.0.3 (64-bit)

@diggy

This comment has been minimized.

Show comment
Hide comment
@diggy

diggy Jun 3, 2017

Contributor

@mjassen checking on my macbook now (MacBookPro10,1, retina) and the icons look fine; at work however I connect to two extra monitors, on which the font is displayed as in the screenshots I posted. Far from an expert on the matter, maybe this is due to my setup and/or config, i.e. false alarm? Edit: cannot check right now, but I'm sure the icons are rendered correctly (smooth) in Chrome (on the extra monitors).

Contributor

diggy commented Jun 3, 2017

@mjassen checking on my macbook now (MacBookPro10,1, retina) and the icons look fine; at work however I connect to two extra monitors, on which the font is displayed as in the screenshots I posted. Far from an expert on the matter, maybe this is due to my setup and/or config, i.e. false alarm? Edit: cannot check right now, but I'm sure the icons are rendered correctly (smooth) in Chrome (on the extra monitors).

@mjassen

This comment has been minimized.

Show comment
Hide comment
@mjassen

mjassen Jun 4, 2017

@diggy

Ok- seems like something outside of the WooCommerce environment.

Curious, though, that it if it is a monitor/graphics issue with that Mac/monitor setup, curious that it affects Firefox and not Chrome, and that the CSS snippet resolves it in that case!

If it can be found how to reliably reproduce the symptom on other environements, then mabye re-open this as WooCommerce issue, otherwise I think a good next-step is try and find out how to update/modify that particular mac/monitor environment.

mjassen commented Jun 4, 2017

@diggy

Ok- seems like something outside of the WooCommerce environment.

Curious, though, that it if it is a monitor/graphics issue with that Mac/monitor setup, curious that it affects Firefox and not Chrome, and that the CSS snippet resolves it in that case!

If it can be found how to reliably reproduce the symptom on other environements, then mabye re-open this as WooCommerce issue, otherwise I think a good next-step is try and find out how to update/modify that particular mac/monitor environment.

@mikejolley mikejolley closed this in d5cb320 Jun 5, 2017

@diggy

This comment has been minimized.

Show comment
Hide comment
@diggy

diggy Jun 5, 2017

Contributor

left Chrome, right FF:

screen shot 2017-06-05 at 13 06 14 3

Contributor

diggy commented Jun 5, 2017

left Chrome, right FF:

screen shot 2017-06-05 at 13 06 14 3

@mjassen

This comment has been minimized.

Show comment
Hide comment
@mjassen

mjassen Jun 5, 2017

@diggy
I was looking into what generates this font icon. It seems like character "...006" in WooCommerce.svg.

However I'm getting stuck on troubleshooting it -- figuring out how apparently JavaScript is generating this icon on-the-fly.

I'm thinking a good next step is to isolate the exact font icon (for example in a sample .html file), and then proceed to try and replicate the symptom, and then move forward to figure out why it is happening in firefox and not Chrome (for that computer monitor/setup)

mjassen commented Jun 5, 2017

@diggy
I was looking into what generates this font icon. It seems like character "...006" in WooCommerce.svg.

However I'm getting stuck on troubleshooting it -- figuring out how apparently JavaScript is generating this icon on-the-fly.

I'm thinking a good next step is to isolate the exact font icon (for example in a sample .html file), and then proceed to try and replicate the symptom, and then move forward to figure out why it is happening in firefox and not Chrome (for that computer monitor/setup)

@mjassen

This comment has been minimized.

Show comment
Hide comment
@mjassen

mjassen Jun 6, 2017

@diggy

Where was it that you inserted the -moz-osx-font-smoothing: grayscale;?
In the browser inspector? Or in a .css file? or in some custom css area? or __(somewhere else, insert here)____?

Can you please look back on that exact computer monitor, in Chrome and then in Firefox, and confirm for sure that on that particular monitor it is symptomatic only in Firefox and not in Chrome? It seems strange to me!

But I'm thinking that if it is, then the css snippet above fixing it will be a good place to start to shed some light on the issue to start to trace back the symptom to its cause -- that's why I'm asking exactly where the custom css was inserted.

Looking forward to read your reply!

mjassen commented Jun 6, 2017

@diggy

Where was it that you inserted the -moz-osx-font-smoothing: grayscale;?
In the browser inspector? Or in a .css file? or in some custom css area? or __(somewhere else, insert here)____?

Can you please look back on that exact computer monitor, in Chrome and then in Firefox, and confirm for sure that on that particular monitor it is symptomatic only in Firefox and not in Chrome? It seems strange to me!

But I'm thinking that if it is, then the css snippet above fixing it will be a good place to start to shed some light on the issue to start to trace back the symptom to its cause -- that's why I'm asking exactly where the custom css was inserted.

Looking forward to read your reply!

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