Firefox & flex layout

[char0n]

Hi,

Is there any particular reason why commit(99c9b60) was made ? The min-height, min-width does no longer have influence on chrome 48 but firefox is still affected without these css properties.

Can you please collaborate ?

After upgrading to angular-material 1.0.6 our application which is in holly grail layout broke down. This is the code we had to introduce to be able to run the application on Firefox and to support version 1.0.6

https://gist.github.com/anonymous/a767374e07209ae8fffa

Reproducable on FireFox 44.0.2

[ThomasBurleson]

@char0n - Thank you for this issue. It will be addressed today!

[dholbert]

@char0n is there a live page / testcase anywhere that reproduces this issue in Firefox? (using the affected Angular version)

I work on Firefox's layout code, and I'd like to take a closer look at the rendering difference between Firefox & Chrome and see if there's something we need to fix (or if it's a known bug in Firefox, or a known bug in Chrome).

Thanks!

[char0n]

@dholbert use this repo: https://github.com/char0n/angular1-slack

In bower.json change 1.0.5 to 1.0.6 and the layout will break on Firefox.

[char0n]

@dholbert I am sorry for lack of info regarding the repo.

Installing process:
$ npm install
$ bower install
Install compass: http://compass-style.org/install/ (after installation it should be in your PATH)

Then you will run
$ grunt serve

Goto: http://localhost:9000/#/conversation

Everything looks good in every browser. On left are channels and on the right there is content area for messages. If messages are higher than content area content area will scroll the messages.

Modify bower.json and change "angular-material": "=1.0.5" to "angular-material": "=1.0.6". Run
$ bower install
$ grunt serve

After opening the page in browser you will see that if messages height is higher that the viewport entire page is scrolling now, not only the content area designated for them.

Hope it is more clearer now. If you have further questions don't hesitate to ask.

[dholbert]

Thanks. With that, I was able to reproduce the issue.

The difference between Firefox & Chrome there is due to https://bugs.chromium.org/p/chromium/issues/detail?id=487302 -- i.e. it's a bug with Chrome producing the wrong min-content height, for a flex item that happens to have a scrollable child.

[char0n]

Cool, so I guess in 1.0,7. will you introduce the min-height fix which was reverted in 1.0.6 ?