search

FortAwesome / angular-fontawesome

Official Angular component for Font Awesome 5+
https://fontawesome.com
MIT License
1.48k stars 149 forks source link

fa-layers-counter not working in prod #160

Closed AmbroiseVuaridel closed 5 years ago

AmbroiseVuaridel commented 5 years ago

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 :

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 commented 5 years ago

Do you get any errors/warnings in the console? May be related to https://github.com/FortAwesome/angular-fontawesome/issues/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 commented 5 years ago

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 commented 5 years ago

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

AmbroiseVuaridel commented 5 years ago

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:

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

devoto13 commented 5 years ago

@AmbroiseVuaridel Then, please, prepare a minimal reproduction of the problem as requested in https://github.com/FortAwesome/angular-fontawesome/issues/160#issuecomment-519703238. Without the reproduction it is hard to assist your further.

AmbroiseVuaridel commented 5 years ago

@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 commented 5 years ago

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 https://github.com/FortAwesome/angular-fontawesome/issues/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.

image

Closing as this is not bug in angular-fontawesome.