fa-layers-counter not working in prod

[AmbroiseVuaridel]

Describe the problem

i got everything working perfectly with ionic 4 and angular 7 with fortawesome 0.3.0,
it is truly awesome.

Unfortunately i have an issue when building for prod : ionic build --prod -- --base-href ./
the badges seem not to be working in this case (it works with ionic serve or ionic build without prod), the code in question is :

<fa-icon [icon]="['fas','shopping-cart']">
<fa-layers-counter [content]="46" class="fa-icon-counter">

this code comes from this tuto to get angular fontawesome work on ionic : https://ionicacademy.com/font-awesome-ionic-4/
(may need to login for free)

What did you expect?

I expected the badge to be visible, exactly as in dev

[devoto13]

Do you get any errors/warnings in the console? May be related to #154.

I personally don't use Ionic, so it's hard to say what may be the issue. If you setup a minimal repro and put it on GitHub, so it is possible to clone, run and observe the problem I can try to debug it.

[devoto13]

Also you do have your code wrapped into fa-layers component, right?

<fa-layers>
  <fa-icon [icon]="['fas','shopping-cart']"></fa-icon>
  <fa-layers-counter [content]="46" class="fa-icon-counter"></fa-layers-counter>
</fa-layers>

[devoto13]

Also content is a string, so it should be either <fa-layers-counter [content]="'46'"> or <fa-layers-counter content="46">.

[AmbroiseVuaridel]

Hello @devoto13, Thank you for your comments!
I just realized the problem is only on firefox, not chrome.
There is no errors/warnings in the console.
I did not enable Ivy.
it is indeed wrapped into a fa-layers component like this:

<fa-icon [icon]="['fas','shopping-cart']">
<fa-layers-counter [content]="'46'" class="fa-icon-counter">

I tried to put a string instead of numbers, it changed nothing.

[devoto13]

@AmbroiseVuaridel Then, please, prepare a minimal reproduction of the problem as requested in #160 (comment). Without the reproduction it is hard to assist your further.

[AmbroiseVuaridel]

@devoto13
I have really narrowed down the problem to firefox (latest version), just run the repro below, you'll see a 46 badge on the cart icon on chrome but not firefox
just do npm i;ionic serve and it'll do (maybe you'll need npm ionic first)
https://github.com/AmbroiseVuaridel/fortawesome_minimal_repro

[devoto13]

The reason is that you use non-standard zoom property, which is not supported by Firefox: https://caniuse.com/#feat=css-zoom, position of the counter element gets messed up and that's why you don't see it. If you remove all custom styling the counter will become visible, but very small (which is tracked in #165).

I would recommend to use dev tools of the browser to debug such issues: select desired element in the element tree and observe where it is located, then try disabling CSS properties until issue is found.

Closing as this is not bug in angular-fontawesome.