[Menu Item] Not rendered properly with RightIcon on FF 45.0.1

[vspiewak]

Problem Description

MenuItem is not rendered properly with RightToggle on FF 45.0.1, see screenshots taken from your official documentation :

Versions

v0.15.0-alpha.2

• Material-UI: v0.15.0-alpha.2
• Browser: 45.0.1

Works fine on Chrome

[mbrookes]

Confirmed in HEAD @3d9007b

[nathanmarks]

@mbrookes This is a bug in firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=874718

https://drafts.csswg.org/css-flexbox-1/#abspos-items

An absolutely-positioned child of a flex container does not participate in flex layout.

[nathanmarks]

@mbrookes

Should we fix it anyways by changing our approach?

[nathanmarks]

@mbrookes

I think this PR caused the regression: #3597

[mbrookes]

Nice 🔍 on the FF bug and cause. 👍

I'm all for moving to modern web standards (even though we've broken a few other things in older but not ancient browsers as a result), but since this breaks layout in a current browser version, we'll have to rethink this one.

@tintin1343 - care to take a look?

[nathanmarks]

@mbrookes @tintin1343

I dug into fixing it while keeping flex, but the main issue is that we're combining a flex parent with absolutely positiong children and depending on that for layout -- which as we can see is not working as intended in firefox.

As long as MenuItem and ListItem are used like this, they should both use either flex, or abspos/floats but not both until this issue is fixed in firefox.

Otherwise you end up having to patch a ton of ListItem styles from MenuItem

[tintin1343]

@mbrookes @nathanmarks : Let me take shot here. I had fixed this for chrome when I was working on the PR.

If its too much work , will need to fix it some other way.

[nathanmarks]

@tintin1343 IMO you are best of rolling back your previous changes and fixing the other issue without converting MenuItem to flexbox. It won't play nice in FF with the abspos children.

[tintin1343]

@nathanmarks : You are right. I just made some changes and checked it. The "absolute" positioning is the culprit and also ListItem is completely messed up component.

@mbrookes @nathanmarks : I will revert back my previous changes.

[nathanmarks]

@tintin1343 thanks, can you please submit a PR first reverting the previous changes? And then approach the problem from the start line again 👍