Text inside card is not verticaly center aligned on Firefox browser - Githubissues

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular

https://swimlane.github.io/ngx-charts/

MIT License

4.29k stars 1.15k forks source link

Text inside card is not verticaly center aligned on Firefox browser #1731

Open yousafravian opened 2 years ago

yousafravian commented 2 years ago

The text in number cards ( chart ) is center aligned. But in firefox, the text sticks on top of the card which is in-consistent

To Reproduce Steps to reproduce the behavior: 1) Open the below link in firefox and chrome and see the difference

https://swimlane.github.io/ngx-charts/#/ngx-charts/number-card

Expected behavior The text in cards should be center-aligned

**ScreenShots Firefox Result https://user-images.githubusercontent.com/31831225/150956131-a78643fd-8840-4600-9dd0-e33875c73dd6.png Chrome Result https://user-images.githubusercontent.com/31831225/150965827-1cb78028-e589-4a05-adea-1a42f7477aaa.png)

Demo https://swimlane.github.io/ngx-charts/#/ngx-charts/number-card

Zoraiyo commented 2 years ago

I can reproduce this error. With the dev options I have found that the position x = 0 and y = 0 differs in both browsers:

Chrome positions the text within the box
Firefox positions the text above the box

I compared the generated HTML and CSS Styles but couldn't find any differences that trigger that behavior nor could I create the error in Chrome by deactivating some CSS. FYI: Microsoft Edge works correct like Chrome