655191 - Layout is erroneously expanded for generated content when multi-column CSS is used and the parent has padding.

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Stephanie Sullivan Rewis]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57 Safari/534.24
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

The above URL demonstrates a layout bug caused by adding padding to the parent of generated content. The parent of the generated content also contains CSS to create multi-columns. 

If the multi-column CSS is removed (but generated content and padding is retained), the bug is resolved. If the generated content is removed (while retaining the multi-columns and padding), the bug is resolved. If the padding is removed (while retaining the generated content and multi-columns), the bug is partially resolved. The bottom of the div is still cut off prematurely.

I have linked in the demo page to both other examples.

Reproducible: Always

Steps to Reproduce:
1. View the demo page.
2.
3.

Actual Results:  
Generated content seems to add the parent's padding value to the size it should actually be causing the right side to protrude and the bottom also protrudes and is cut off.

Expected Results:  
The generated content should remain a uniform 15px all the way around the parent div. 

Calculate the proper size for the generated content.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Probably a duplicate of bug 454749.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

The Example URL is WFM now with Bug 10209 fixed using Mozilla/5.0 (Windows NT 5.1; rv:10.0a1) Gecko/20110930 Firefox/10.0a1 ID:20110930172132 (Built from http://hg.mozilla.org/mozilla-central/rev/325e330499b4)

Stephanie Sullivan, you can try out the next to come Nightly Build (http://nightly.mozilla.org/) to check it out yourself.

Comment 3

[j.j.]

Mozilla/5.0 (Windows NT 5.1; rv:10.0a1) Gecko/20111006 Firefox/10.0a1

URL works now in Firefox 10, likely fixed with bug 10209.

Comment 4

[ms-studio]

I have a test case where Firefox shows unreliable behavior with multi-column CSS and generated content (tested in FF 10.0.2 and Aurora 12.0a2, on MacOSX 10.6).

The test page (broken):
http://sandbox.4o4.ch/test-multicolumn-clearfix/broken/

# Explanation: #
What you see is a multi-column layout where CSS Media Queries are used to display one (default), two (min-width : 600px) or three columns (min-width : 768px). You will understand the idea when resizing the page.

# The issue: #
upon page load, if the browser window has (min-width : 768px), Firefox is randomly displaying either 2 or 3 columns, with the content not being evenly distributed. You can reload the page several times to see the issue.

If the browser window is manually resized, Firefox reflows the columns and corrects the issue.

Other tested browsers: Safari 5, Chrome 17 and Opera 11 don't show the issue, the columns are always rendered correctly.

# What is causing the issue: #
After some detective work, I figured out that the piece of code that confuses FF is a "clearfix" CSS class, that had been applied on each of the sub-items inside the multi-column element (it's actually is not needed here, so the easy solution for me is to remove it from my production code).

The clearfix I use is the classic one found in HTML5 boilerplate:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }

# Second test page, without clearfix (works):
The second test page is entirely similar to the first one, except for the "clearfix" CSS class that has been removed:

http://sandbox.4o4.ch/test-multicolumn-clearfix/works/

After this change, the multi-column layout works perfectly both in Firefox 10 and 12.

# My conclusion: #
Generated content is still causing unreliable behaviour with multi-column rendering. The issue strangely "fixes itself" when the user causes a manual reflow of the layout.