Weird characters on random refreshes (Ubuntu 14.04, Archlinux, Chrome)

[joaokamun]

Its happen sometimes, and I dind't find any pattern to reproduce, its just random.
Everything is working properly, but suddenly in one refresh or page change, all icons become weird characters like "", "", "�". After a refresh, icons back to normal.

Any Ideas of what is happening?

Screenshots
When bug occurs:

Normally:

[tagliala]

Browser? Browser version? OS? Any further detail?

Is it reproducible on jsfiddle?

[joaokamun]

My bad..
Browsers that already occured: Chrome (50+) and Chromium (57.0.2987)
OS: Ubuntu 14.04 and Archlinux

Like I said, its totally random, and it back to work when I refresh. At first I thought was only in my machine, but some other users reported that 'bug' already (ubuntu users) - I never tried on other browsers, because its so random.

Probably not reproducible on jsfiddle, I cant even reproduce when I want on my application.

Any tips? Maybe some encoding, I dont know...
Fontawesome is at 4.7.0.

[tagliala]

What is the failure percentage? Could you please try with another icon font using the PUA? (bootstrap's glyphicons should be fine)

[joaokamun]

Very low.
I'll change to glyphicon and try receive the bug.

[tagliala]

Thanks.

If you also use other webfonts on your website (let's say Open Sans), please check that when you are not seeing font awesome icons, the other text is properly displayed and it does not fallback to the default system font

[PeterShaggyNoble]

Are they the characters that would otherwise be displayed if FA wasn't loaded? It may simply be a case that, for some reason, the FA font files aren't being downloaded - if you have your browser's console open, you'll be able to check that.

[tagliala]

@joaokamun are you using font awesome from the cdn or your local server? If you are using font awesome on your local server, are you using css, less or scss?

[joaokamun]

From local server and using scss.

[tagliala]

could you please past the output of your css file? I think there is an issue related to #6728

[joaokamun]

@tagliala https://gist.github.com/joaokamun/823d277f7e7f7baf31240a1232bd25be

[tagliala]

@joaokamun thanks

Apparently, #6728 is not involved.

Output from #6728 is something like

.fa-home:before{content:""}

[joaokamun]

It happened again.

On console:

variable.scss file:

css file:

But again, just a refresh, and everything back to normal!

I'll stop using scss for while. But if has anything I can do to help find the cause of the problem. I'm glad to help.

I'll made more tests with glyphicons, didn't occured this problem yet.

[tagliala]

@joaokamun well, I think #6728 is one the cause of your issue.

Apparently, sometime your sass compiler (or server?) messes up with encoding, producing non-unicode files

Please take a look at #6728 for a possible workaround and unquoted variables

[mtbolger]

We've seen this issue in Chrome as well, we found that we could consistently (~30% of the time or so) reproduce the issue if we open the DevTools then immediately refresh the page.

Another odd thing we noticed is that, when this issue occurs, Chrome isn't listing our CSS file on its "Network" tab. Seems like it may be a Chrome cache issue.

[tagliala]

@Rhannek could you please check CDN failure rate?

[mtbolger]

@tagliala We aren't using a CDN in this case, we're loading both the CSS and the font files from a local web server. It happens consistently on multiple machines. Each time Chrome's Network tool is missing our CSS file even though a request was sent. This is why we are thinking it is a Chrome cache issue, where the cached version of our CSS has incorrect content: "" entries.

[tagliala]

We aren't using a CDN in this case

Yes, I know. Since I'm unable to replicate this issue, I was wondering if there could be some server side configuration involved

[mtbolger]

We don't believe it is, it happens in cases where Chrome is not retrieving the CSS from the server, it is loading it from the cache. The exact set of steps we're seeing is something like this:

• Refresh page, icons load as expected
• Check Chrome Network tab, CSS was loaded as expected, viewing CSS in DevTools shows boxes in content: "" CSS
• Open DevTools then immediately refresh page
• Page loads, but icons are showing as odd characters (not boxes)
• Check Chrome Network tab, CSS is not mentioned (for this step we used Wireshark to watch what Chrome actually did, it did make a request to our server, our server responded with a 304 Not Modified)
• Check Source tab, CSS is present but the content: "" sections in the CSS have the same odd characters as the screen, even though the server did not retrieve the file from the server

[tagliala]

*Check Chrome Network tab, CSS was loaded as expected, viewing CSS in DevTools shows boxes in content: "" CSS

• Open DevTools then immediately refresh page

If I'm already in the Network tab, DevTools aren't already open?

PS: do you think this is the case of submitting a bug to chrome developers, maybe with a video showing the issue?

[artursopelnik]

+1

[tagliala]

@artursopelnik please do not comment with +1, they don't help here

[artursopelnik]

@tagliala Same bug here ...

Solution:
Overwrite _variables.scss with own _fa-variables.scss, where you remove the quotes around.

Example:
// Fontawesome
@import 'font-awesome/scss/variables';
@import './fa-variables'; // https://gist.github.com/artursopelnik/1f30deea1b276228c4a7ac7f4e5f8ad3
@import 'font-awesome/scss/path';

Read more:
sass/sass#1395 (comment)

Output before
.icon-share:before{content:"ï‡ "}"

Output after
.icon-share::before {content: "\f1e0";}

[tagliala]

The workaround above fixes #6728

#6728 is assigned to 5.0.0 milestone, but it could be postponed

[nhanle020285]

i got the same scenario issue, i solved by set response header content-type to text/css; charset=UTF-8

[tagliala]

Hi,

I'm pretty confident that this has been solved in Font Awesome 5.0.0 because we are using another approach to generate content properties.

If this is still an issue, please open a new request and fill out our bug report template

[silviodelgado]

Hi,

I'm pretty confident that this has been solved in Font Awesome 5.0.0 because we are using another approach to generate content properties.

If this is still an issue, please open a new request and fill out our bug report template

This is happening often in my web application.
This occurs randomly, after a refresh for any reason (through F5 press or refreshing by code).
I'm using 5.11.2 version.
I was using latest version and having the same bug, then I downgraded to test, but it still happening.

[tagliala]

@silviodelgado please open a new issue by following the bug report template. Please provide a reproducible test case

[NuclearMachine]

Can confirm, still happening here.

[tagliala]

Hi @NuclearMachine

I'm going to lock here. This particular issue was related to how chars were encoded in the css file and it has been fixed in version 5.0.0

If you are still experiencing issues, please fill out our bug report template and remember to provide all the information required, including

• version of the OS
• version of the browser
• implementation of Font Awesome (SVG / CSS - css I guess)
• how Font Awesome is hosted (cdn / kit / self-hosting)

Since this is random and it is not possible to provide a reproducible test case, please provide ad least a test case which is randomly failing.

🔒