Closed Bug 571938 Opened 10 years ago Closed 10 years ago

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

Categories

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

defect
Not set
major

Tracking

()

RESOLVED DUPLICATE of bug 579776

People

(Reporter: mike, Unassigned)

References

()

Details

Attachments

(4 files)

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.
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.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Attached file moz_box.html
this is still showing error. See moz_box.html
I tested in 
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a6pre) 
Gecko/20100617 Minefield/3.7a6pre
Status: RESOLVED → UNCONFIRMED
Resolution: FIXED → ---
Status: UNCONFIRMED → NEW
Ever confirmed: true
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
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
I have discovered that there are other CSS properties that break display: box; in FireFox:

- position: absolute;
- float: *;
- overflow: hidden;
position: fixed; does the same.
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'
from Comment 9
OS: Mac OS X → All
Hardware: x86 → All
Just curious, what is http://player.bettervideo.com/HTM/test.html in URL field has to do with this bug?
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.
Attached file 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)
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
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.
Dupping forward to bug with more technical info.
Status: NEW → RESOLVED
Closed: 10 years ago10 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 579776
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;
You need to log in before you can comment on or make changes to this bug.