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
Something is blocking font assets in your browser.
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.
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.
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.
Can you share the link of the board so we test it and try to reproduce the behavior?
Thanks for the help! You can see it here: https://mywoohyun.com And this is what I see from Developer Tool:
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.
1 Like
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.
Adding https://mywoohyun.com to your cors origins setting might solve it.
3 Likes
I had to add
DISCOURSE_ENABLE_CORS: true
to the app.yml then
./launcher rebuild app
as well.
3 Likes