[Button] Vertical text alignement issue on Firefox

[jasminnancy]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Buttons do not render properly with correct padding. As you can see, the text looks raised and is higher than it should be. While this seems like a small issue, it is noticeable when using rounded buttons and is an issue in production.

No amount of `button::-moz-focus-inner` or any other found solution does the trick.

Expected Behavior 🤔

Button should render with text centered.

Steps to Reproduce 🕹

Steps:

1. Import and create button
2. Open button on Chrome and Firefox
3. See that padding is different

Context 🔦

This is an issue, mostly, for buttons that have rounded edges. It's fairly noticeable and frustrating, especially since we can't get it to stop doing this. Can you possibly add Firefox support for this so it stops happening automatically?

Your Environment 🌎

Tech	Version
Material-UI	v4.9.9
React	v16.13.1
Browser	Firefox

[oliviertassinari]

@jasminnancy Do you have a better reproduction? It almost displays aligned for me on Firefox 83 macOS:

Firefox 82 Windows 10

Vertical alignment of text inside a button is tricky! Different fonts have a different alignment of the baseline compare to the ascender and descender.

[mkarajohn]

This is definitely an inconsistency with some fonts @jasminnancy , especially prevalent when icons are in there as well

Firefox on Linux

Chromium on Linux

This is actually a pretty old "issue" which has to do with the fact that FF is implementing font metrics accorrding to spec, while the Chromium browsers are not.

See

• https://stackoverflow.com/questions/26830461/text-vertical-alignment-within-button-on-firefox-and-chrome-when-using-helveti
• textBaseline not interoperable whatwg/html#2470
• Line height rendering issues RedHatOfficial/Overpass#56 (comment)

Could this be fixed on the font level @oliviertassinari ? There are some fonts that work the same on both browsers, but Roboto ain't one of them. Turns out I had not actually loaded the Roboto font 😅 The Ubuntu font for example looks the same on both browsers

Chromium on Linux

Firefox on Linux

[lcdss]

Same thing here with Material-ui 5.0.0-alpha.29.

Firefox Developer Edition 88 on Linux:

Chromium 90 on Linux:

[oliviertassinari]

@lcdss Do you have a codesandbox? Is it related to a custom font?

[lcdss]

@lcdss Do you have a codesandbox? Is it related to a custom font?

This only happens on Firefox (as far as I have tested) and I'm not using a custom font. Problably this is related to #19584.

#19584 (comment)

[Misaka-0x447f]

A simple workaround: just not to use roboto would fix that.

  typography: {
    fontFamily: `inherit`,
  },