Bug 67895

Summary:

REGRESSION (Safari 5.0.5-5.1): An absolute positioned block, inside a relative positioned block, in a CSS3 column, is clipped to the boundaries of the column

Product:

WebKit

Reporter:

James Holderness <j4_james>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

1010bugs, bfulgham, hyatt, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Attachments:

Description	Flags
Test case	none
Test case, two column layout where absolute positioned element is split (badly) between two columns	none
Two column test case rendered in both Firefox and Chrome for comparison	none

James Holderness

Reported 2011-09-10 13:49:59 PDT

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.

Attachments
Test case (1.69 KB, text/html) 2011-09-10 13:51 PDT, James Holderness	no flags	Details
Test case, two column layout where absolute positioned element is split (badly) between two columns (1.52 KB, text/html) 2014-03-04 06:30 PST, Stephen	no flags	Details
Two column test case rendered in both Firefox and Chrome for comparison (47.56 KB, image/png) 2014-03-04 06:32 PST, Stephen	no flags	Details
View All Add attachment proposed patch, testcase, etc.

James Holderness

Comment 1 2011-09-10 13:51:43 PDT

Created attachment 106982 [details] Test case

Stephen

Comment 2 2014-03-04 06:30:41 PST

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.

Stephen

Comment 3 2014-03-04 06:32:00 PST

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)

Stephen

Comment 4 2014-03-04 06:39:14 PST

I suggest changing the title of this bug to: Absolute positioned block inside CSS3 column is clipped to column boundaries and split between columns.

Brent Fulgham

Comment 5 2022-07-12 15:21:07 PDT

WebKit continues to fail these test cases.

Radar WebKit Bug Importer

Comment 6 2022-07-12 15:21:26 PDT

<rdar://problem/96913620>

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