I have an H1 with position absolute inside a DIV with position relative inside another DIV with a -webkit-column-count of 2. The H1 is positioned such that it overflows the boundaries of the outer columned DIV. I would expect the entire H1 to be visible, but it is clipped to the boundaries of the outer DIV - anything extending outside the boundaries is invisible. Removing the relative position from the inner DIV makes the H1 visible again. Removing the column-count from the outer DIV also makes the H1 visible. The attached HTML example demonstrates the problem. If it is working correctly, it should display a green block of columned text with a blue "Heading" above it. When displayed incorrectly, the blue heading is invisible. This test case works as expected in Firefox 6.0.2 (tested on OSX and Windows Vista), and Opera 11.50 (on OSX). It fails in Safari 5.1 (7534.50) on Windows Vista, and Google Chrome (13.0.782.220) on OSX. It also works in Safari 5.0.5 (6533.21.1) on OSX which suggests that it might be a regression.
Created attachment 106982 [details] Test case
Created attachment 225770 [details] Test case, two column layout where absolute positioned element is split (badly) between two columns Its worse than just being clipped, absolutely positioned elements are also split between columns.
Created attachment 225771 [details] Two column test case rendered in both Firefox and Chrome for comparison Here is how this test case in rendered in both Firefox (correctly) and Chrome (incorrectly)
I suggest changing the title of this bug to: Absolute positioned block inside CSS3 column is clipped to column boundaries and split between columns.
WebKit continues to fail these test cases.
<rdar://problem/96913620>