F7-button text not being centered in Android


#1

I tested the app on a browser with the mobile view and the buttons work just fine:

However when I download and install the app on an Android the button text raises and it’s not centered anymore.

Is there a way to solve this issue?
Eventhough it’s just a little bit of missalignment, it still has some impact in the design.

Any tips? This is F7 with Vue, using f7-buttons.

Edits:

  • I changed the button height by changing the following css var:
    –f7-button-height: 60px;
    Oddly enough, line-height 60px works for browser and iOS, but I’d need to put like 72px; for it to “center” in Android, which ofc is not the way to go.

  • Also worth noting: the text is centered in both browser and iOS, but not on Android.

  • Already checked and this.$f7.theme gives “md”, so the material design theme is on for Android.


#2

Is it a custom font? Issue can be in the font itself. If you switch back to default font, do you still see the issue?


#3

Yeah, removed all the custom fonts and still happening for some reason.

Edit:

  • For some reason it’s only happening on some Androids, I tested another Android and it worked fine, but the one I’m using for testing missbehaves… Have you encountered this kind of issue before?