Grey Square Icons on Everywhere on Chrome for Mac


(Jongnam Lee) #1

It looks okay on iOS and even on Safari on Mac. But the icons displayed as grey square on Chrome for Mac.

  • Chrome version = 51.0.2704.103 (64-bit)
  • Discourse version = v1.6.0.beta11 +132


(Jeff Atwood) #2

Something is blocking font assets in your browser.


(Jongnam Lee) #3

Thanks for helping me out. How can I find the root cause? Is there a way to identify that and fix?

This problem does not happen always, but it shows up at a sudden time, keep the problem happening a couple hours, and be resolved automatically. It heppens from two macbook laptops at the same time so it is not client who blocks them; it may either server blocked the font or the discourse’s web UI is somewhat incompatible with Chrome for Mac. But not clear what the root cause is.


(Rafael dos Santos Silva) #4

This looks like a proxy or firewall blocking Font Awesome download.

Do a full refresh with Dev Tools open (F12) and you will see the problem.


(Jongnam Lee) #5

If the download was blocked by proxy or firewall, that problem should be reproduced on a single laptop in consistent manner.

But on my own laptop, Safari was working good while Chrome has this issue.


(Rafael dos Santos Silva) #6

Can you share the link of the board so we test it and try to reproduce the behavior?


(Jongnam Lee) #7

Thanks for the help! You can see it here: https://mywoohyun.com And this is what I see from Developer Tool:


(Rafael dos Santos Silva) #8

FontAwesome is on the static.mywoohyun.com.

Going to it, gets me a 301 redirect back to mywoohyun.com.

This results in a block by CORS policy:

Redirect at origin 'https://static.mywoohyun.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://mywoohyun.com' is therefore not allowed access.

(Jongnam Lee) #9

Thanks for the point. How can I resolve that issue? Fyi, static.mywoohyun.com is CNAME to AWS CloudFront distribution, which its origin is agin mywoohyun.com.


(Neil Lalonde) #10

Adding https://mywoohyun.com to your cors origins setting might solve it.