I have encountered with a weird issue with ionic4 framework. Ionic4 is adding extra height at the bottom of the text in Android, where as on iOS the above and below height is same.
Below is sample code
< ion-label id=“newactivity” class=“recent-header activity-label” >New ACTIVITY</ ion-label >
Not only on ion-label but where ever I have text in the app, the extra space/height is being added at the bottom on Android app.
[the above image is when am debugging in chrome]
If you observe very closely the text is not center aligned ON ANDROID, ( which works fine in iOS*)
No padding or margin is applied. only text-align center is applied,
To make the text to appear CENTER on android, I have to add 2px extra padding on top of every text element.
I hate to add padding on each and every element like this,
Really appreciate if you can suggest me to make it work.
Note: There is nothing to do with CSS (like flex,justify, line height etc), the extra height is added at bottom on ANDROID. on the text itself.
To understand the issue, inspect any ionic app on android and hover on text (don’t apply any css property or padding and closely check above and below height of the text)
Related observations and solutions are much appreciated.