Open robzenn92 opened 7 years ago
Thanks for reporting @robzenn92!
Adding height: 100%
helps solve the problem, but in addition to that, the .material-icons
CSS's display: inline-block
style is overriding the icons' default display: flex
, so we'll have to solve that as well.
Also seems to affect other browsers if the toolbar is flexible and shown on desktop. See https://codepen.io/anon/pen/JJLJmM after scrolling to an expansion factor of 0.
What MDC-Web Version are you using?
0.13.0
What browser(s) is this bug affecting?
Only Firefox (I have version 53.0.2) Works fine in safari and chrome.
What OS are you using?
macOS 10.12.4
What are the steps to reproduce the bug?
Go to https://material-components-web.appspot.com/toolbar/default-toolbar.html or visit http://0.0.0.0:8080/toolbar/.
What is the expected behavior?
All the material icons within the toolbar should be vertically centered in all the browsers. E.g. in chrome this is fine. See:
What is the actual behavior?
All the material icons within the toolbar are not vertically centered in Firefox. See:
Any other information you believe would be useful?
To the best of my knowledge this is due to the property
height: 100%
specified in line 63. In fact, after removing it icons are vertically centered in all the browser and nothing else is affected.