Icons are randomly janky (scssphp) #18775

GameCharmer · 2022-03-04T19:19:07Z

closed because it is a duplicate of #17644

I can't quite explain this one, but it happens randomly using the self-hosted SCSS implementation of Font Awesome 6 Pro. I can go for a few hours without this weird graphic bug occuring. It's totally random, and I can sit and refresh the same page and watch it crop up once every hundred or so refreshes. I'm using Chrome on Win 10

Here's some examples that indicate what's going on better than I could put into words.

| | | | |
| | | | |

tagliala · 2022-03-04T19:27:49Z

Hi!

Thanks for being part of the Font Awesome Community.

I think this may be related to #17644

Please check how the unicode entities are encoded in the output css file.

If the css contains PUA characters like content: ""; (instead of content: "\f26e";), then I suggest to check that:

The HTML file has <meta charset="utf-8">
The CSS file has @charset "UTF-8";

having the charset directive in the HTML only may not be enough

if this is the same issue, let me know so we can continue on #17644

GameCharmer · 2022-03-04T19:44:38Z

@tagliala That was exactly the issue! I'm not too keen on github issues and didn't realize I was only searching in Open. :P

Sorry about that, have a great day, and thanks for the fast response!

GameCharmer · 2022-03-04T21:38:22Z

@tagliala if I may ask, do you know why it does that at random? I'm not using the JS, so it should be consistent between page refreshes.

I've tried everything at this point and can't get things to work properly. If I use the all.css flat out, every character is a broken rectangle on every page. They do show up as "\fwhatever when using the all.css file though.

If I compile the scss, include @charset "UTF-8"; as the first line, ensure it's being saved as UTF-8 to disk, set the first item in <head> to <meta charset="utf-8">, the characters show up properly... 99% of the time. When looking at the compiled.css file, the first line is indeed @charset "UTF-8"; but all of the content items are content: "";

Since we're running NGINX, I even went and added charset UTF-8; to the http section in nginx.conf, as well as to every location, still PUA characters in the output, which does work most of the time.

tagliala · 2022-03-05T08:25:02Z

if I may ask, do you know why it does that at random?

Nope :\

@GameCharmer if I got this correctly, even when both charset directive are set, it does not work 100% of times but it does help, correct?

GameCharmer · 2022-03-06T00:57:30Z

@tagliala correct. I wonder if this is something specific to chrome. Reports from end users have dropped off significantly since adding the meta tag and css charset line, and I've only had it crop up once since making the change. ¯_(ツ)_/¯

The only question I have left is, should the resulting CSS file content: "\f26e"; or content: "";?

tagliala · 2022-03-06T09:00:46Z

should the resulting CSS file content: "\f26e";

This. As I mentioned in the other thread, there has been a breaking change in a minor release of dart-sass and ruby-sass

The only workaround I can see is:

customize the whole _variables.scss by removing trailing backslashes from icon variables (eg: $fa-var-address-book: \f2b9; => $fa-var-address-book: f2b9;)

override fa-content function

@function fa-content($fa-var){
  @return unquote("\"") + unquote(str-insert($fa-var, "\\", 1)) + unquote("\"");
}

Having a copy of icon variables is frustrating but we can't figure out a way to preserve backward compatibility

tagliala · 2022-03-17T11:08:37Z

@GameCharmer

This should have been fixed a while ago in dart-sass 1.38.0

https://github.com/sass/dart-sass/releases/tag/1.38.0

sass/dart-sass#1430

Please give it a try

GameCharmer · 2022-03-17T12:06:13Z

@tagliala I don't use dart sass at this time. It looks like there really isn't a good way to handle things in PHP. :P

https://github.com/scssphp/scssphp

tagliala · 2022-03-17T12:19:21Z

Thanks

I should install some dependencies to work with scssphp

Could you please send me the compiled output of

$fa-new-content: false !default;

@function fa-content($fa-var) {
  @if $fa-new-content {
    @return unquote("\"") + unquote(str-insert($fa-var, "\\", 1)) + unquote("\"");
  }

  @return unquote("\"#{ $fa-var }\"");
}

$fa-var-500px: \f26e;

@if $fa-new-content {
  $fa-var-500px: "f26e";
}

.icon::before {
  content: fa-content($fa-var-500px);
}

with both $fa-new-content: false and $fa-new-content: true?

GameCharmer · 2022-03-17T12:43:55Z

Output when false

@charset "UTF-8";
.icon::before {
  content: "";
}

Output when true

.icon::before {
  content: "\f26e";
}

tagliala · 2022-03-18T17:40:16Z

@GameCharmer if I provide you some instructions to workaround this issue, are you willing to test if that would fix 100% of the cases?

GameCharmer · 2022-03-18T18:52:43Z

@tagliala absolutely

tagliala · 2022-03-20T10:16:00Z

Hi @GameCharmer , I've tried to provide a step by step fix here: diowa/ruby3-rails6-bootstrap-heroku#540

This is based on Font Awesome Free, so steps for Pro should be a little bit different

At the end of the procedure, we should check if variables in the output css have the proper escaped entity

NOTE: This change will make harder to update Font Awesome

Feel free to ask any question

GameCharmer · 2022-03-21T12:30:05Z

@tagliala The CSS generates properly with your fix! This shows up properly in the CSS, and my pages are rendering properly after numerous refreshes.

.fa-book::before{content:"\f02d"}

Thank you!

tagliala · 2022-03-21T12:46:56Z

@GameCharmer welcome

Please let me know if there are changes and you still randomly get failures

tagliala · 2022-04-13T09:43:14Z

I'm going to lock here and move the discussion to #17644

tagliala · 2022-09-27T14:25:06Z

Reopening because of #17644 (comment)

tagliala · 2022-09-27T21:03:29Z

@GameCharmer unlocked, please report here scssphp specific issues, I will then move to the other thread if they are relevant

GameCharmer · 2022-09-28T03:39:47Z

Ahh crap, dev and production didn't line up, jumped the gun on the response.

When applying the same set of fixes as last time, I wind up with resulting classes like so

.fa-chart-network::before{content:"f78a"}

but the rendered output results in this

I've swapped out the fa-content function in _functions.scss to the below

@function fa-content($fa-var) {
  @return unquote("\"") + unquote(str-insert($fa-var, "\\", 1)) + unquote("\"");
}

and have updated _variables.scss

...
$fa-var-fill-drip: "f576";
$fa-var-arrows-to-circle: "e4bd";
$fa-var-circle-chevron-right: "f138";
$fa-var-chevron-circle-right: "f138";
$fa-var-wagon-covered: "f8ee";
$fa-var-line-height: "f871";
$fa-var-bagel: "e3d7";
$fa-var-transporter-7: "e2a8";
$fa-var-at: "40";
...

GameCharmer · 2022-09-28T03:54:05Z

Interesting enough, this time around, if I avoid scss entirely and just load in all.css and run a simple str_replace, I'm golden.

    $faCss = \file_get_contents($faDir.'css/all.css');
    $faCss = str_replace('../webfonts/',$faWeb.'webfonts/',$faCss);

That works perfect. Sometimes the simplest option is the best option.

magynhard · 2023-02-20T11:41:14Z

For others, facing the same issue:

The problem with displaying the icons incorrectly when contained in unicode characters is Chrome related and happens only in Chrome and other Chromium based browsers (e.g. Edge or Vivaldi). I could not reproduce it on Firefox or Safari.

It is not related to FontAwesome, it is related to all Iconfonts using unicode. (Im my case my own font)

It can even be reproduced regularly the following way:

Open your browser
Open your website
Open Chrome Dev Tools (F12)
Reload Page (only F5 or Reload button, not Force Reload)
Icons are displayed incorrectly

It works only once, if you want to repeat, you need to close the developer tools, reload the page, then reopen the developer tools again and reload again.

It seems, that chrome does not check or detect the format of the CSS correctly when the page is reloaded with developer tools open at the first time.

For me, the best solution was - as mentioned by others before - to add

@charset "UTF-8";

at the beginning(!) of the .css file to workaround the Chromium engine bug.

tagliala added the waiting for feedback label Mar 4, 2022

GameCharmer closed this as completed Mar 4, 2022

tagliala removed the waiting for feedback label Mar 17, 2022

tagliala mentioned this issue Mar 20, 2022

Experimental/fontawesome css unicode fix diowa/ruby3-rails6-bootstrap-heroku#540

Open

tagliala mentioned this issue Mar 27, 2022

Strange/Weird characters on refresh (Self-hosted CSS compiled from SCSS) #17644

Open

7 tasks

tagliala changed the title ~~Icons in 6 Pro are randomly janky.~~ Icons in 6 Pro are randomly janky (scssphp) Mar 31, 2022

FortAwesome locked and limited conversation to collaborators Apr 13, 2022

jpcamara mentioned this issue Jun 14, 2022

Add ASCII output support sass/dart-sass#568

Open

tagliala reopened this Sep 27, 2022

FortAwesome unlocked this conversation Sep 27, 2022

GameCharmer closed this as completed Sep 28, 2022

GameCharmer reopened this Sep 28, 2022

GameCharmer closed this as completed Sep 28, 2022

tagliala changed the title ~~Icons in 6 Pro are randomly janky (scssphp)~~ Icons are randomly janky (scssphp) Dec 4, 2022

tagliala mentioned this issue Jan 7, 2025

Bug: Deprecation of global built-in functions for Dart Sass 3.0.0 #20521

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Icons are randomly janky (scssphp) #18775

Icons are randomly janky (scssphp) #18775

GameCharmer commented Mar 4, 2022 •

edited by tagliala

Loading

tagliala commented Mar 4, 2022 •

edited

Loading

GameCharmer commented Mar 4, 2022

GameCharmer commented Mar 4, 2022

tagliala commented Mar 5, 2022

GameCharmer commented Mar 6, 2022

tagliala commented Mar 6, 2022

tagliala commented Mar 17, 2022 •

edited

Loading

GameCharmer commented Mar 17, 2022

tagliala commented Mar 17, 2022 •

edited

Loading

GameCharmer commented Mar 17, 2022

tagliala commented Mar 18, 2022

GameCharmer commented Mar 18, 2022

tagliala commented Mar 20, 2022 •

edited

Loading

GameCharmer commented Mar 21, 2022

tagliala commented Mar 21, 2022

tagliala commented Apr 13, 2022

tagliala commented Sep 27, 2022

tagliala commented Sep 27, 2022 •

edited

Loading

GameCharmer commented Sep 28, 2022

GameCharmer commented Sep 28, 2022

magynhard commented Feb 20, 2023

Icons are randomly janky (scssphp) #18775

Icons are randomly janky (scssphp) #18775

Comments

GameCharmer commented Mar 4, 2022 • edited by tagliala Loading

closed because it is a duplicate of #17644

tagliala commented Mar 4, 2022 • edited Loading

GameCharmer commented Mar 4, 2022

GameCharmer commented Mar 4, 2022

tagliala commented Mar 5, 2022

GameCharmer commented Mar 6, 2022

tagliala commented Mar 6, 2022

tagliala commented Mar 17, 2022 • edited Loading

GameCharmer commented Mar 17, 2022

tagliala commented Mar 17, 2022 • edited Loading

GameCharmer commented Mar 17, 2022

tagliala commented Mar 18, 2022

GameCharmer commented Mar 18, 2022

tagliala commented Mar 20, 2022 • edited Loading

GameCharmer commented Mar 21, 2022

tagliala commented Mar 21, 2022

tagliala commented Apr 13, 2022

tagliala commented Sep 27, 2022

tagliala commented Sep 27, 2022 • edited Loading

GameCharmer commented Sep 28, 2022

GameCharmer commented Sep 28, 2022

magynhard commented Feb 20, 2023

GameCharmer commented Mar 4, 2022 •

edited by tagliala

Loading

tagliala commented Mar 4, 2022 •

edited

Loading

tagliala commented Mar 17, 2022 •

edited

Loading

tagliala commented Mar 17, 2022 •

edited

Loading

tagliala commented Mar 20, 2022 •

edited

Loading

tagliala commented Sep 27, 2022 •

edited

Loading