Open kfranqueiro opened 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:
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:
line-height: inherit
should be fine, judging by my earlier tests)Some conclusions from yesterday:
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.
I'm splitting off the outlined button issue to #3026
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 theadd
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