651348 - Multi-column doesn't balance properly with absolutely position images

Status: NEW

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

Description

[Craig Topper]

This can be seen on the IE test drive Tweet columns page. The columns often end up unbalanced.

I've poked around and reduced it down to likely being caused by the absolutely positioned images used to represent each user.

Comment 1

[Craig Topper]

Attachment: Test case

This reduced test case also demonstrates the problem. The CSS specifies there should be 3 columns. The green images are absolutely positioned just like the IE test drive page. As you can see the columns aren't balanced and nothing ends up in the third column.

Comment 2

[Craig Topper]

Attachment: Frame dump

Here is a frame dump taken after each call to ReflowChildren inside the while loop in nsColumnSetFrame::Reflow.

What you can see in the frame dump is that sometimes the column block frames end up with an overflow rect that exceeds the height of the column. This causes the column balancing code to detect that column height is infeasible.

The overflow rects look to be caused by the absolutely positioned images ending up near the end of the column. Rather than being pushed to the next column they end up overflowing the column.

Comment 3

[Thomas Wisniewski [:twisniewski]]

Neither IETestDrive nor the GMBinder share with the known breakage are accessible anymore, so we don't know of any other actual breakage from this right now. Let's drop the webcompat priority.