Bug 25455

Summary: Position relative breaks CSS3 multi column
Product: WebKit Reporter: Garrett Conaty <garrett>
Component: CSSAssignee: Dave Hyatt <hyatt>
Status: RESOLVED DUPLICATE    
Severity: Major CC: adele, bdakin, hyatt, simon.fraser
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.5   
Attachments:
Description Flags
html file showing the problem none

Garrett Conaty
Reported 2009-04-28 12:42:45 PDT
Bug appears when any of the children of a block that is using webkit-column-width webkit-column-gap height has a CSS style of position:relative. Not sure if the height calculation is getting messed up or ? but the children don't break into the next column. Instead they overflow the container. In fact you can get an odd effect if the grandchildren have position:relative set. In that case the children wrap into the next column, but the grandchildren don't. This bug also occurs if the child element has style of overflow:hidden. Furthermore (and this may be a separate bug), if you set the children to have any margin, they break at innapropriate places (like the middle) Sample HTML follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> <style type="text/css" media="screen"> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } ol, ul { list-style: none; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border : 0; } caption, th { text-align: left;f } q:before, q:after { content: ''; } html, body { /* get rid of that 2px window border in Internet Explorer 6 */ border: 0; } .columntest { background-color: red; -webkit-column-width: 300px; -webkit-column-gap: 10px; height: 100px; } .box { /*position: relative;*/ overflow: hidden; width: 300px; height: 25px; background-color: yellow; } </style> </head> <body> <div class="columntest"> <ul> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> </ul> </div><!-- .columntest --> </body> </html>
Attachments
html file showing the problem (12.54 KB, text/html)
2016-05-20 05:56 PDT, Senén de Diego 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Garrett Conaty
Comment 1 2009-04-28 12:47:21 PDT
Note that the sample code shows the case for overflow hidden (position relative commented out). Just tried the overflow hidden on the latest nightly and it doesn't trigger the bug. However, position:relative still does
Adele Peterson
Comment 2 2010-05-11 10:03:08 PDT
*** Bug 38887 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 3 2010-05-11 10:04:51 PDT
Bug 38887 has a testcase.
Adele Peterson
Comment 4 2010-05-11 10:08:05 PDT
<rdar://problem/7968819>
Dave Hyatt
Comment 5 2010-05-14 20:20:49 PDT
r59513 has made this better. The content will now show up and be in the right spot as long as it does not span multiple columns. Splitting across columns still fails though.
Dave Hyatt
Comment 6 2010-05-18 23:10:29 PDT
*** This bug has been marked as a duplicate of bug 21049 ***
Senén de Diego
Comment 7 2016-05-20 05:56:24 PDT
Created attachment 279479 [details] html file showing the problem I don't think this is solved, nor related to opacity. Children of a container with position relative, inside another container with overflow hidden only are visible in the first column.
Simon Fraser (smfr)
Comment 8 2016-06-06 10:09:31 PDT
I don't see any obvious issues with your test case in a recent WebKit build.
Note You need to log in before you can comment on or make changes to this bug.