620205 - Layout issue with empty divs and css flexbox (-moz-box) style

Status: NEW

(Core :: Layout, defect)

Description

[[e-mail]]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7

When using flexbox (-moz-box styles) and HTML5 doctype, empty <div> elements used in the composition of an element creates a layout issue.  The flexbox element is misaligned with respect to the top of the parent element. A 16px top margin gets implicitly inserted between parent and child element.

The workaround is to either remove the DOCTYPE header or insert non-breaking spaces into the empty div elements.

Also repros on Firefox 3.6.  While the margin issue is visible, it's not visible to Firebug. (Firebug shows the offsets, margins, padding, and sizes of inner and outer div elements as they should be).

Does not repro on Chrome 8.0.552.224

I wrote a very simple example page here that demonstrates the problem.
http://www.harstinecottage.com/ffissue/index.htm


Reproducible: Always

Steps to Reproduce:
1. Create an outer div of any size (say 300x300)

2. Create an inner div to use width:100% height:100% display:-moz-box -moz-box-orient:horizontal.

3. Create 2 child elements within the inner div. One has a fixed width, the other gets stretched via -moz-box-flex:1 style.

4. Do not insert any content within the divs created above other than the nested child divs.

See sample page on: http://www.harstinecottage.com/ffissue/index.htm


Actual Results:  
Total outer div size is 16px larger than it should be. (300x316 in this example).  Child element is correct size, but shifted down within parent.  Hence, it appears there's a 16px margin.

Expected Results:  

No margin added.  Workarounds should not have to be applied.

Comment 1

[Tim (fmdeveloper)]

Issue still occurs with latest nightly - Mozilla/5.0 (Windows NT 5.1; rv:2.0b9pre) Gecko/20101219 Firefox/4.0b9pre ID:20101219030346

Comment 2

[Boris Zbarsky [:bzbarsky]]

I'd suggest attaching the testcase to this bug using the "Add an attachment" link.

Comment 3

[Boris Zbarsky [:bzbarsky]]

And this isn't html5; there is no flexbox in html5.

Comment 4

[[e-mail]]

Attachment: Sample html source file demonstrating css flexbox issue with empty divs (identical to what's on web)

Comment 5

[[e-mail]]

attachment added.

Comment 6

[Ed Morley [:emorley]]

Confirmed with 3.6.13 and Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20110103 Firefox/4.0b9pre ID:20110103030359

Renders fine in Chrome dev 10.x.

Comment 7

[Tim (fmdeveloper)]

Still an issue with Mozilla/5.0 (Windows NT 5.1; rv:9.0a1) Gecko/20110827 Firefox/9.0a1 ID:20110827030801

Comment 8

[sjw]

Fixed with the new spec.