Weird characters on random refreshes

[timgabrhel]

Describe the problem

Searching for a problem similar to mine, I came across #10842. The behavior is identical. Some random refreshes will render weird characters. Typically a refresh fixes it.

What did you expect?

The icons to render appropriately

What version and implementation are you using?

Version: Font Awesome 5 Pro
Browser and version: Chrome 72.0.3626.109

Font Awesome scss is imported into our site scss, ultimately compiled down to a single minified css.

Reproducible test case

It is seemingly random. When it occurs, here's what I can see from dev tools. This time around, I was lucky enough to have dev tools already opened when the problem occurred, and did not see my site.min.css present in the network tab traffic. Perhaps this is browser caching. We have seen this issue surface on brand new page loads after a deployment, as random refreshes on a site deployed and accessed for days.

This doesn't feel like a server output encoding problem (mentioned in the other thread), as a refresh solves it. These are compiled down on our build server and deployed out. Typically, the icons come back after a refresh.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Font Awesome scss is imported into our site scss, ultimately compiled down to a single minified css.

Could you please post the relevant part of your compiled css?

[timgabrhel]

Hi!

Thanks for being part of the Font Awesome Community.

Font Awesome scss is imported into our site scss, ultimately compiled down to a single minified css.

Could you please post the relevant part of your compiled css?

Just like I saw in the other related thread, here's a portion of the minified CSS on our site. Snip is from Chrome dev tools.

[tagliala]

Ok, I can confirm that it is the same problem as #10842

I think there is an issue while compiling Font Awesome in your stack, but I'm not confident of the origin of this issue.

Could you please check that there are no Font Awesome 4 scss file in your repository?

Anyway, given the input:

// Convenience function used to set content property
@function fa-content($fa-var) {
  @return unquote("\"#{ $fa-var }\"");
}

$fa-css-prefix: fa;
$fa-var-pencil: \f040;

.#{$fa-css-prefix}-pencil:before { content: fa-content($fa-var-pencil); }

A proper compilation process will provide the following output:

.fa-pencil:before {
  content: "\f040";
}

You can check your sass compiler type and version, maybe you need an update.

All the versions I've checked on sassmeister.com provide the following correct output

Closing here, but feel free to comment.

I will reopen if we figure out that there is an issue in Font Awesome itself

---

edit: I'm not aware of css uglifier / minimizers that change the escaped css unicode point to an actual unicode point to reduce the size of the css. If there is such an optimization, please remove that

[rafecolton]

@tagliala we are still experiencing this with 5.8.1. It happens intermittently even when scss has not been recompiled. Is there any definitive solution?

[MitchTalmadge]

Running into the same problem with random refreshes causing weird characters to display.

I've noticed that if you open the compiled CSS file in an editor and change the encoding mode to "Windows 1252", then it will show the exact same characters:

UTF-8:

Windows 1252:

Now to find out why the browser randomly uses this encoding.

[tagliala]

@MitchTalmadge the proper output is UTF-8

Could you please check that your CSS starts with @charset "UTF-8";? It looks like that the browser is randomly interpreting UTF-8 resources as ASCII

Ref: sass/dart-sass#568 (comment)

Anyway, I think that we have issues with Sass again.

Will discuss this in our private repo

[MitchTalmadge]

Hi @tagliala,

I think our HTML page was missing a meta tag for the UTF-8 charset. Either way, we've added charset=utf-8 to our content-type header for CSS files and it seems to be working now.

Thank you!

[tagliala]

welcome

I think our HTML page was missing a meta tag for the UTF-8 charset.

Oh, thanks.

I'm ashamed of myself, but now I've got that the utf <meta> tag also works for linked assets

If you set that meta tag, then you will not need @charset "UTF-8" in the CSS

Scenario 1: UTF HTML <meta> tag + CSS @charset ✅

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <span class="monkey">
  </body>
</html>

@charset "UTF-8";
.monkey::before {
  display: block;
  content: "🙈";
}

---

Scenario 2: UTF HTML <meta> tag ✅

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <span class="monkey">
  </body>
</html>

.monkey::before {
  display: block;
  content: "🙈";
}

---

Scenario 3: CSS @charset ✅

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <span class="monkey">
  </body>
</html>

@charset "UTF-8";
.monkey::before {
  display: block;
  content: "🙈";
}

---

Scenario 4: no meta tag, no charset ❌

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <span class="monkey">
  </body>
</html>

.monkey::before {
  display: block;
  content: "🙈";
}

[tagliala]

🔒 Locking here, let's use #17644