Button: Issue with icon/text alignment in Chrome on Android and Linux

material-components / material-components-web

Modular and customizable Material Design UI components for the web

https://material.io/develop/web

MIT License

17.15k stars 2.15k forks source link

Button: Issue with icon/text alignment in Chrome on Android and Linux #2526

Open kfranqueiro opened 6 years ago

kfranqueiro commented 6 years ago

What MDC Web Version are you using?

0.34.1

What browser(s) is this bug affecting?

Chrome

What OS are you using?

Android and Linux only (Windows and OS X seem fine)

What are the steps to reproduce the bug?

View http://material-components-web.appspot.com/button.html

What is the expected behavior?

Icon should be aligned with text

What is the actual behavior?

Text is a couple of pixels too high

Any other information you believe would be useful?

This is potentially even easier to spot if you replace the favorite icon with the add icon (which is what I did for the screenshots above).

Codepen: https://codepen.io/kfranqueiro/pen/VxgJZY

I don't know whether this comes down to a Chrome issue given that it's even platform-specific...

Filed with Chromium as https://bugs.chromium.org/p/chromium/issues/detail?id=845169

kfranqueiro commented 6 years ago

A few people on the team have done some testing with this, and the text label alignment issues might not entirely be Chrome's fault, so I'm going to investigate some more.

Specifically, this image from Abhinay's Extended FAB PR (#2858) suggests that some of the problem may actually be font-related:

Font alignments

Moreover, Andrey and I did some testing a few weeks ago where we concluded that the line-height adjustments currently being performed for stroked buttons may no longer be necessary since the switch to inline-flex, and may actually be working against us.

So, I want to test the following:

[x] Roboto, with line-height adjustments removed (line-height: inherit should be fine, judging by my earlier tests)
[x] Another font (e.g. Arial)
[x] Another font, with line-height adjustments removed

kfranqueiro commented 6 years ago

Some conclusions from yesterday:

The text label alignment issue on Chrome/linux seems to happen regardless of font
Removing line-height adjustments for dense/stroked variants seems to generally improve Chrome and Edge (and fixes the original instance of the problem reported within our team)

I have a branch with the line-height removal changes which I can PR if we're all OK with these results.

I'd still like to figure out a minimum reproducible case to update the issue I previously reported to Chrome about icon vs. text misalignment. This is rather odd, though, since ostensibly both the icon and text are rendered with fonts... yet somehow only the text fonts are affected.

lynnmercier commented 6 years ago

I'm splitting off the outlined button issue to #3026