Open Bug 681050 Opened 13 years ago Updated 2 years ago

Percentage width/height not honored on children of a -moz-box element

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect

Tracking

()

People

(Reporter: johnjbarton, Unassigned)

References

Details

Attachments

(5 files)

Firefox fail example
61.59 KB, image/png
Details
Chrome ok example
107.83 KB, image/png
Details
test case html file
4.09 KB, text/html
Details
reduced testcase 1
425 bytes, text/html
Details
reduced testcase 2, for "max-width: [percent]" in a -moz-box
608 bytes, text/html
Details 
Instead of obeying width 100% and height 100%, an iframe in -moz-box reverts to some default width and height.
Attached image Firefox fail example — 

    
    

    
  

      
      
      
      

        Attached image
          
        Chrome ok example
        — 
      

    


  

    
    

    
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>flexbox fails around iframe - 3 column layout</title>
    <meta name="copied from" content="Gwilym Johnston">
    <link rel="stylesheet" href="base.css" type="text/css" media="screen">
    <style type="text/css">  
/* base.css inlined */
H1 {
    display: block;
    font-size: 40px;
    padding: 8px 0;
    margin: 4px 0;
    /* width: 50px; */
    background: rgba(255, 255, 255, 0.6);
}
P {
    padding: 4px;
    margin: 4px;
    background: rgba(255, 255, 255, 0.3);
}
.flexbox {
    margin: 10px;
    padding: 10px; 
    text-align: center;
}
#box-1 {
    width: 100px;
    height: 100px;
    background-color: #E8B15B;
    
}
#box-2 {
    width: 100px;
    height: 100px;
    background-color: #C1D652;
}
#box-3 {
    width: 100px;
    height: 100px;
    background-color: #CDFCA9;
}
#main {
    border: 8px solid #eee;
}
HEADER {
    margin: 10px;
    padding: 10px;
    border: 8px solid #eee;
}
FOOTER {
    margin: 10px;
    padding: 10px;
    border: 8px solid #eee;
}
/* end base.css */
       .flexbox {
           display:-moz-box;
           display:-webkit-box;
           display: box;
           text-align: left;
        }
        #main,
        HEADER,
        FOOTER { 
            min-width: 640px; /* prevents overflow */
        }
        H1 {
            width: auto;
        }
        #box-1 {
            height: auto;
            min-width: 180px; /* prevents overflow */
            
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            box-ordinal-group: 2;
            
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
        }
        #box-2 {
            height: auto;
            width: 180px;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #box-3 {
            height: auto;
            width: 130px;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
            box-ordinal-group: 1;   
        }
        body {
    font-family: Helvetica, Arial, sans-serif;
}

    </style>
</head>
<body>
    <header>
        <h1>Firefox flexbox does not play well with iframe</h1>
        <p>Modified copy of <a href="http://www.gwilym.com/flexbox/example-10.html">example-10</a>
          from <a href="http://blog.isotoma.com/2010/08/css3-flexbox/">CSS3 Flexbox</a>. The content of the center 
          section includes an iframe</p>
    </header>
    <section id="main" class="flexbox">
        <section id="box-1" class="flexbox">
           <iframe style="width: 100%; height: 100%; border: 0px none;" src="http://blog.isotoma.com/2010/08/css3-flexbox/"></iframe>
        </section>
        <aside id="box-2" class="flexbox"> 
            <h1>2 Sidebar</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
            </p>
        </aside>
        <nav id="box-3" class="flexbox">
            <h1>3 Nav</h1>
              
            <ul>
                <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
                <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
                <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
                <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
                <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
            </ul>
        </nav>
    </section>
    
    <footer>
        <h1>Footer</h1>
    </footer>
</body>
</html>

    
    

    
  

      
      
      
      

        Attached file
          
        test case html file
        — 
      

    


  

    
    

    
  
I tried removing all of the section/footer stuff but it does not matter.

    
    

    
  
I suspect the current flexbox code just wasn't designed for dealing with % on children; the authors assumed you'd use flex, etc.

The height issue is easy to work around by giving the iframe -moz-box-flex: 1.

Oddly enough, using any -moz-box-align *other* than its initial value of 'stretch' works around the width issue, though it seems like a bug to me that 'stretch' doesn't shrink things while the others do.

    
    

    
  
(And that's using -moz-box-align on #box-1.)

    
    

    
  
Oh, and the other sentence I meant to write before I was interrupted while commenting here is that dholbert is working on a new implementation of the flexbox spec which will hopefully eventually replace our current one.

    
    

    
  
Thanks, the workaround in comment 6 worked.  
For my reference, the similar but different bug in chrome:
http://code.google.com/p/chromium/issues/detail?id=93826
Summary: Firefox iframe in -moz-box gets wrong width and height → Replaced element with percentage width/height in -moz-box gets wrong width and height

    
    

    
  
I found another -moz-box issue related to iframe. I do not know whether it is the same bug related to this issue or not. Basically there are two iframe in the body (i.e. leftFrame and the rightFrame), and I set the body to "display: -moz-box", the left iframe set to "width: 80px" and the right iframe set to "-moz-box-flex: 1". This works fine in Google Chrome 18, but fail in FireFox 12 (the left iframe does not obey the width setting which should be 80px, and you can also notice there are a vertical scroll bar shown which should not be there.
Here is the test case:
http://jsfiddle.net/TfjzC/

    
    

    
  
Pretty sure the original bug here doesn't require replaced elements -- it's broken on any children of a -moz-box element that happen to have a percent width.

Reduced testcase to demonstrate that coming up.
Component: Layout: HTML Frames → Layout
OS: Linux → All
Hardware: x86_64 → All
Summary: Replaced element with percentage width/height in -moz-box gets wrong width and height → Percentage width/height in -moz-box gets wrong width and height
Version: unspecified → Trunk
Summary: Percentage width/height in -moz-box gets wrong width and height → Percentage width/height not honored on children of a -moz-box element

    
    

    
  


  
This testcase demonstrates the same behavior for "max-width: [percent]" -- it seems to be disregarded in Firefox (with -moz-box), but not in Chrome (with -webkit-box).
Blocks: 953240

    
  
Severity: normal → S3

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: