571938 - display:-moz-box does not work with position:absolute

Status: RESOLVED DUPLICATE of bug 579776

(Core :: Layout: Block and Inline, defect)

Description

[Mike Wilcox]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

The summary says it all. Note I tried making my display:-moz-box element a child of an element that was absolutely positioned and that did not work either. display:-moz-box works as expected otherwise.

The supplied URL is a development link so its possible it may change.

Reproducible: Always

Steps to Reproduce:
1. Make an element styled with display:-moz-box 
2. Make child elements, use -moz-box-flex:1; to make one element flexible
3. Then make first (parent) element absolute. Breaks the flex model.
NOTE: This works in WebKit.
Actual Results:  
Vary from either just acting like display:box is not applied to assuming the size of the parent's parent.

Expected Results:  
I expect it to conform to the size of the container and have one element flexible.

Comment 1

[Mike Wilcox]

This looks like I was in error. Webkit was able to get a size from a video tag's width and height attributes, FF not. There was technically not a style on the node so I was getting bad results. I'm pretty sure it works as expected.

Comment 2

[Biju]

Attachment: moz_box.html

this is still showing error. See moz_box.html

Comment 3

[Biju]

I tested in 
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a6pre) 
Gecko/20100617 Minefield/3.7a6pre

Comment 4

[Biju]

From attachment 452233 [details]

computed style for first "a" box

HTML > BODY > DIV > DIV
height: 20px
width: 80px
-moz-box-flex: 1
border-*-color: rgb(255, 165, 0)

HTML > BODY > DIV
display: -moz-box
height: 26px
width: 100px
border-*-color: rgb(0, 0, 255)
border-*-style: solid
border-*-width: 1px
margin-*: 1px
padding-*: 1px

HTML > BODY
height: 114px
width: 1377px
margin-*: 8px

HTML
height: 146px
cursor: crosshair
empty-cells: show

computed style for second "a" box

HTML > BODY > DIV > DIV
display: -moz-box
position: static
bottom: auto
height: 20px
left: auto
right: auto
top: auto
width: 7px
-moz-box-flex: 1
border-*-color: rgb(255, 165, 0)

HTML > BODY > DIV
position: absolute
bottom: 709px
height: 26px
left: 8px
right: 1279px
top: 146px
width: 100px
border-*-color: rgb(0, 0, 255)
border-*-style: solid
border-*-width: 1px
margin-*: 1px
padding-*: 1px
HTML > BODY
height: 114px
width: 1377px
margin-*: 8px

HTML
height: 146px
cursor: crosshair
empty-cells: show

Comment 5

[Biju]

Attachment: work_arround_moz_box.html

Comment 6

[Gaetan Renaudeau]

Same bug on 
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.4) Gecko/20100622 Fedora/3.6.4-1.fc13 Firefox/3.6.4


Regards

Comment 7

[stephband]

I have discovered that there are other CSS properties that break display: box; in FireFox:

- position: absolute;
- float: *;
- overflow: hidden;

Comment 8

[Stefan]

position: fixed; does the same.

Comment 9

[Rob Crowther]

Another test case: http://www.boogdesign.com/examples/boxes.html

The significant difference in the computed styles is on the parent element (with class 'container' in my example).  Normally that element has the computed style of 'display: -moz-box' as specified in the CSS, but when that element is 'position: absolute' it reverts to 'display: block'

Comment 10

[Biju]

Attachment: boxes.html - boogdesign.com

from Comment 9

Comment 11

[Biju]

Just curious, what is http://player.bettervideo.com/HTM/test.html in URL field has to do with this bug?

Comment 12

[Rob Crowther]

In the description it says "The supplied URL is a development link so its possible it may change."  I'm guessing the URL has nothing to do with it any more.

Comment 13

[Regis Montoya (r3gis)]

Attachment: Test case for fixed

Same thing here but with :
position: fixed;
Attached a new test case for position fixed.

Expected : 3 buttons should be shown in bottom bar 
Observed : only one visible (other are hidden below)

Additional info : on webkit based browsers appear properly.
Workaround that consist in adding a proxy div works with fixed too. 
But in order to respect the spec this bug is important I think : I've tried to use css3 for a real project (I mean not just some funny demo ;) ) for only 2 days with css3 and faced this one very quickly ! 

However firefox implementation still appear to be the best one... You'd be amazed of bugs and lacks I found in chromium for example. So keep the good work :)!

Also noticed sides effects when there is cascading of -moz-box (some unwanted margins appears). But I guess that's another issue (I'll investigate more to be sure it's not linked to this one and open another if not)

Comment 14

[Zibi Braniecki [:zbraniecki][:gandalf]]

changing the url to a testcase.

Comment 15

[Zibi Braniecki [:zbraniecki][:gandalf]]

ehh, just hit me hard while working on some HTML5 demos and wanted to use display:box.
Reassigning to Core/Layout: Block and Inline. Hope that's the right one.

Comment 16

[Boris Zbarsky [:bzbarsky]]

Dupping forward to bug with more technical info.

Comment 17

[Paweł Ludwiczak]

got the same thing on any element with box-model, not only child. for example:
<h1>test</h1>
h1 {
    border: 1px solid black;
    width: 100%; 
    height: 200px;
    position: absolute;
    /* flex box below */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: end;
}

NOTE:
it works for position: relative;