search

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

Toolbar for desktop: icons are not vertically centered in Firefox #845

Open robzenn92 opened 7 years ago

robzenn92 commented 7 years ago

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:

chrome1 schermata 2017-06-21 alle 18 37 28

What is the actual behavior?

All the material icons within the toolbar are not vertically centered in Firefox. See:

firefox1 firefox2

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.

traviskaufman commented 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.

cdiener commented 7 years ago

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.