931757 - Ghost margins when using flexboxes

Status: RESOLVED DUPLICATE of bug 903880

(Core :: Layout, defect, P5)

Description

[Sander]

Attachment: flexbox-chrome-vs-firefox.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Steps to reproduce:

The following testcase shows unexpected behaviour of flexboxes, where a combination of rules result in ghost margins.

Simple DOM outline:

body (display: flex, flex-direction: column)
- header
-- p
- div (flex: 1)
-- p
- footer
-- p

See http://home.react.nl/~sandervl/testcases/firefox-ghost-margin.html


Actual results:

The div is stretched with flex: 1 to use as much space as possible. The header paragraph, containing 'some text', stretches the header to twice the expected height when a width is set on the paragraph.


Expected results:

See screenshot; Fx on the right, Chrome (expected result) on the left.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2, comparing different "align-items" values

This is the same underlying issue as bug 903880, as shown by this testcase.

This is a case where we're following the spec, which says we have to figure out the size of the flex container in the main axis (its height, in this case) *before* we consider "align-self" on the children. Put another way, the container's height should be the same regardless of the "align-self" value.

That's true in current Firefox (i.e. we render both chunks as ~3em tall in this testcase), but not true in Chrome (they render the first one as shorter).

I think the spec should be changed on this point, and my patches in bug 903880 implement my proposed spec-change and make us match Chrome on the testcases here. (and on the reporter's URL)  Hopefully I should be landing those shortly.

Comment 4

[Sander]

Ah, my apologies for the duplicate. Bug #903880 did not pop up in my search but it indeed looks like the same problem :)

Comment 5

[Daniel Holbert [:dholbert]]

No worries at all!  Thank you for the bug and for the testcase.  The testcase is actually quite useful; over on bug 903880, I'd only been able to trigger this with multiple nested flex containers, but the testcase here can trigger the issue with only one flex container, which makes things easier to analyze.